Tweenライブラリの使用

エンティティや、2点の間の任意の値をアニメートすることがよくあります。これはトゥイーンと呼ばれ、その目的のためにトゥイーンライブラリを作成しました。ライブラリはhttps://github.com/playcanvas/playcanvas-tweenにあります。

ライブラリを使うには tween.jsファイルをプロジェクトにアップロードしてください。これにより、位置、回転、スケールなどのエンティティプロパティをトゥイーンすることができます。

entity.tween(entity.getLocalPosition()).to({x: 10, y: 0, z: 0}, 1, pc.SineOut);

エンティティのローカル位置をトゥイーンする方法の例です：

Here are links to the Project and the Editor for this example.

To get the above we are doing:

this.entity
    .tween(this.entity.getLocalPosition())
    .to(new pc.Vec3(4, 0, 0), 1.0, pc.SineOut)
    .loop(true)
    .yoyo(true)
    .start();

Here is an example on how to tween the local rotation of an Entity:

この例のProjectとEditorへのリンクです。

上記を得るために以下を行うことができます：

this.entity
    .tween(this.entity.getLocalEulerAngles())
    .rotate(new pc.Vec3(180, 0, 180), 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .start();

エンティティのローカルスケールをトゥイーンする方法は次のとおりです：

Here are links to the Project and the Editor for this example.

To get the above we can do:

this.entity
    .tween(this.entity.getLocalScale())
    .to(new pc.Vec3(3, 3, 3), 1.0, pc.SineOut)
    .loop(true)
    .yoyo(true)
    .start();

And finally here's a way to tween colors:

この例のProjectとEditorへのリンクです。

上記を得るために以下を行うことができます：

var color = new pc.Color(0, 0, 0);
var material = this.entity.render.material;
this.app
    .tween(color)
    .to(new pc.Color(1, 1, 1), 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .on('update', function () {
        material.diffuse = color;
        material.update();
    })
    .start();

ライブラリはhttps://github.com/playcanvas/playcanvas-tweenにあります。