コンテンツにスキップ

KFLinearCurve

KFLinearCurve は、キーフレーム間の数値またはベクトルを線形補間する Curve クラスです。

このクラスを利用することで、指定したキーフレームにもとづいて、数値やベクトルを線形に変化するアニメーションを実現できます。

主なメソッド

メソッド名 関数値型 説明
setKeyFrames number, vector2, vector3, vector4 キーフレームを設定します

キーフレームは2つ以上必要で、アニメーション時刻は昇順、アニメーションパラメータは初期化時に指定した関数値型を指定します。

この例では、時刻 \(0[s]\) 時点で \(10.0\) 、時刻 \(2[s]\) で \(40.0\) としてキーフレームを設定します。 そのため、この場合では \(1[s]\) 時点で \(25.0\) となります。

1
2
3
4
5
const curve = new mapray.animation.KFLinearCurve( mapray.animation.Type.find( "number" ) );
curve.setKeyFrames([
    mapray.animation.Time.fromNumber( 0 ), 10.0,
    mapray.animation.Time.fromNumber( 2 ), 40.0,
]);

その他メソッドや詳細は リファレンスマニュアル を参照してください。

サンプルコード

PinEntity のサイズや色を線形に変化させるアニメーションの例を示します。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <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>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

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

<script>
    class CustomViewer extends maprayui.StandardUIViewer {
        constructor( container, apikey ) {
            super( container, apikey);

            const pinEntity = new mapray.PinEntity( this.viewer.scene );
            pinEntity.addPin( new mapray.GeoPoint( 139.699985, 35.690777, 40 ), { id: "pin", size: 40, bg_color: [1, 0, 0] });
            this.viewer.scene.addEntity( pinEntity );
            const pinEntry = pinEntity.getEntry( "pin" );

            // Create linear curve.
            const curve1 = new mapray.animation.KFLinearCurve( mapray.animation.Type.find( "number" ) );
            const curve2 = new mapray.animation.KFLinearCurve( mapray.animation.Type.find( "vector3" ) );

            curve1.setKeyFrames([
                mapray.animation.Time.fromNumber( 0 ), 10.0,
                mapray.animation.Time.fromNumber( 1 ), 25.0,
                mapray.animation.Time.fromNumber( 2 ), 40.0,
            ]);

            const keyframes2 = [
                mapray.animation.Time.fromNumber( 0 ), [ 0.0, 1.0, 0.0 ],
                mapray.animation.Time.fromNumber( 1 ), [ 0.0, 0.0, 1.0 ],
                mapray.animation.Time.fromNumber( 2 ), [ 1.0, 0.0, 0.0 ],
            ];
            for ( let t = 0; t <= 3; ++t ) {
                keyframes2.push(
                    mapray.animation.Time.fromNumber( 2.5 + t ), [ 1.0, 1.0, 1.0 ],
                    mapray.animation.Time.fromNumber( 3.0 + t ), [ 1.0, 0.0, 0.0 ],
                );
            }
            curve2.setKeyFrames( keyframes2 );

            // Create updater.
            this.totalTime = 0;
            this.isAnimationStart = false;
            this.updater = new mapray.animation.Updater();

            // Bind "size" and "bg_color" param to updater and curve.
            pinEntry.animation.bind( "size", this.updater, curve1 );
            pinEntry.animation.bind( "bg_color", this.updater, curve2 );
        }

        /** @override */
        onUpdateFrame( delta_time ) {
            super.onUpdateFrame( delta_time );
            if ( this.isAnimationStart ) {
                this.totalTime += delta_time;
                this.updater.update( mapray.animation.Time.fromNumber( this.totalTime ) );
            }
        }

        /** @override */
        onMouseDown( point, event ) {
            super.onMouseDown( point, event );
            this.totalTime = 0;
        }

        startAnimation() {
            this.totalTime = 0;
            this.isAnimationStart = true;
            console.log( "start animation" );
        }
    }

    // Set up your API Key, which can be created in Mapray Cloud.
    const apikey = "<YOUR_MAPRAY_API_KEY>";
    const uiviewer = new CustomViewer( "mapray-container", apikey);

    uiviewer.setCameraPosition({
        longitude: 139.697475,
        latitude: 35.682494,
        height: 420
    });

    uiviewer.setLookAtPosition({
        longitude: 139.699985,
        latitude: 35.690777,
        height: 35
    });

    uiviewer.startAnimation();
</script>

Info

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