Curve animation¶

Using cosine curve to make animation

anime_pin_curve.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Curve animation</title>
    <meta property="og:description" content="Using cosine curve to make animation" />
    <script src="./v0.10.1/mapray.min.js"></script>
    <script src="./v0.10.1/maprayui.min.js"></script>
    <link rel="stylesheet" href="./v0.10.1/mapray.css">
    <style>
        body {margin: 0; padding: 0;}
        html, body, div#mapray-container { height: 100%; }
    </style>
</head>

<body>
<div id="mapray-container"></div>
</body>
</html>

<script>
    class CosCurve extends mapray.animation.Curve
    {
        constructor( type, keyframes )
        {
            super();

            if ( type != mapray.animation.Type.find("number") ) {
                throw mapray.animation.AnimationError( "unsupported type" );
            }

            this._value_type = type;
            this._ratio = 1.0
            this._base_value = 1.0;
            this._value_ratio = 1.0;
        }

        setRatio( ratio )
        {
            this._ratio = ratio;
        }

        setBaseValue( value )
        {
            this._base_value = value;
        }

        setValueRatio( ratio )
        {
            this._value_ratio = ratio;
        }

        /**
         * @override
         */
        isTypeSupported( type )
        {
            let from_type = this._value_type;
            return type.isConvertible( from_type );
        }


        /**
         * @override
         */
        getValue( time, type )
        {
            let from_type  = this._value_type;
            let from_value = this._getInterpolatedValue( time );
            return type.convertValue( from_type, from_value );
        }


        /**
         * @override
         */
        getInvariance( interval )
        {
            return new mapray.animation.Invariance();
        }

        _getInterpolatedValue( time )
        {
            const theta = (time.toNumber() * this._ratio + 180) * mapray.GeoMath.DEGREE;
            return (Math.cos(theta) + 1) * 0.5 * this._value_ratio + this._base_value;
        }
    }

    class AnimationView extends maprayui.StandardUIViewer {
        constructor(container, options) {
        super(container, options);

            this.updater = new mapray.animation.Updater();
            this.is_animation_start = false;
            this.total_time = 0;

            this.createCurve();
            this.AddEntity();
        }

        onUpdateFrame(delta_time) {
            super.onUpdateFrame(delta_time);

            if (this.is_animation_start) {
                // 経過時間の更新
                this.total_time += delta_time;

                // Updaterに時間を投げる
                this.updater.update(mapray.animation.Time.fromNumber(this.total_time));
            }
        }

        // キーフレームデータの作成
        createCurve() {
            this.curve1 = new CosCurve(mapray.animation.Type.find("number"));

            // キーフレームデータの作成
            this.curve1.setRatio(30);
            this.curve1.setBaseValue(10.0);
            this.curve1.setValueRatio(80.0);

            // 経過時間の初期化
            this.total_time = 0;
        }

        // Entity追加
        AddEntity() {
            // 文字のエンティティを作成
            var font_entity = new mapray.TextEntity(this.viewer.scene);

            // 新宿駅付近
            var font_point = new mapray.GeoPoint(139.699985, 35.690777, 100);

            font_entity.addText("Shinjuku", font_point, { color: [0, 0, 0], font_size: 50 });

            // エンティティをシーンに追加
            this.viewer.scene.addEntity(font_entity);

            // ピンのエンティティを作成
            var pin_entity = new mapray.PinEntity(this.viewer.scene);

            // 新宿駅付近
            var pin_point = new mapray.GeoPoint(139.699985, 35.690777, 100)

            // ピンを追加
            pin_entity.addPin(pin_point, { id: 0, size: 40, bg_color: [1, 0, 0] });

            // エンティティをシーンに追加
            this.viewer.scene.addEntity(pin_entity);

            // PinEntityを記憶
            this.pin_entity = this.viewer.scene.getEntity(1).getEntry(0);

            // UpdaterにBindingBlockを紐づける
            this.pin_entity.animation.bind("size", this.updater, this.curve1);

            // Animation開始
            this.is_animation_start = true;
        }
    }

    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
    });

    // The StandardUIView in the ui package includes mouse-based camera manipulation.
    var uiviewer = new AnimationView( "mapray-container", { 
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );

    var lookat_position = new mapray.GeoPoint(139.69685, 35.689777, 100.0);
    var mlocs_to_gocs = lookat_position.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
    var cam_pos = mapray.GeoMath.createVector3([0, -2000, 500]);
    var cam_pos_gocs = mapray.GeoMath.transformPosition_A(mlocs_to_gocs, cam_pos, mapray.GeoMath.createVector3() );
    var cam_pos_iscs = {longitude: 0, latitude:0, height:0};
    mapray.GeoMath.gocs_to_iscs(cam_pos_gocs, cam_pos_iscs);

    uiviewer.setCameraPosition({
        longitude: cam_pos_iscs.longitude,
        latitude: cam_pos_iscs.latitude,
        height: cam_pos_iscs.height
    });

    uiviewer.setLookAtPosition({
        longitude: lookat_position.longitude,
        latitude:  lookat_position.latitude,
        height: lookat_position.height
    });

</script>

Info

このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。