Step animation¶

Animation without interpolation
anime_pin_step.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Step animation</title>
    <meta property="og:description" content="Animation without interpolation" />
    <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
  <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
  <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/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 AnimationView extends maprayui.StandardUIViewer {
        constructor(container, apikey, options) {
            super(container, apikey, 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));

                if (this.total_time > 10.0) {
                    this.total_time = 0.0;
                }
            }
        }

        // キーフレームデータの作成
        createCurve() {
            var keyframes1 = [];
            var keyframes2 = [];

            this.curve1 = new mapray.animation.KFStepCurve(mapray.animation.Type.find("number"));
            this.curve2 = new mapray.animation.KFStepCurve(mapray.animation.Type.find("vector3"));

            // キーフレームデータの作成
            keyframes1.push(mapray.animation.Time.fromNumber(0));
            keyframes1.push(5.0);
            keyframes1.push(mapray.animation.Time.fromNumber(2));
            keyframes1.push(10.0);
            keyframes1.push(mapray.animation.Time.fromNumber(4));
            keyframes1.push(15.0);
            keyframes1.push(mapray.animation.Time.fromNumber(6));
            keyframes1.push(20.0);
            keyframes1.push(mapray.animation.Time.fromNumber(8));
            keyframes1.push(30.0);
            keyframes1.push(mapray.animation.Time.fromNumber(10));
            keyframes1.push(40.0);
            this.curve1.setKeyFrames(keyframes1);

            keyframes2.push(mapray.animation.Time.fromNumber(0));
            keyframes2.push(mapray.GeoMath.createVector3([0, 1.0, 0]));
            keyframes2.push(mapray.animation.Time.fromNumber(1));
            keyframes2.push(mapray.GeoMath.createVector3([0, 0, 1.0]));
            keyframes2.push(mapray.animation.Time.fromNumber(2));
            keyframes2.push(mapray.GeoMath.createVector3([1.0, 0, 0]));

            for (let t = 0; t <= 5; ++t) {
                keyframes2.push(mapray.animation.Time.fromNumber(2.5 + t));
                keyframes2.push(mapray.GeoMath.createVector3([1.0, 1.0, 1.0]));
                keyframes2.push(mapray.animation.Time.fromNumber(3 + t));
                keyframes2.push(mapray.GeoMath.createVector3([1.0, 0, 0]));
            }

            this.curve2.setKeyFrames(keyframes2);

            // 経過時間の初期化
            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);
            this.pin_entity.animation.bind("bg_color", this.updater, this.curve2);

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

    // Set up your access token, which can be created in Mapray Cloud.
    var apikey= "<YOUR_MAPRAY_API_KEY>";

    // The StandardUIView in the ui package includes mouse-based camera manipulation.
    var uiviewer = new AnimationView( "mapray-container", apikey);

    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_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。