Tweenライブラリの使用方法

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

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

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

ここでは、Entityのローカル位置をトゥイーンする方法の例が示されています。

この例のプロジェクトとエディタへのリンクを貼ります。

これを行うには、以下のようにします。

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

次に、Entityのローカル回転をTweenする方法の例が示されています。

この例のプロジェクトとエディタへのリンクを貼ります。

これを行うには、以下のようにします。

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

次に、Entityのローカルスケールをトゥイーンする方法の例が示されています。

この例のプロジェクトとエディタへのリンクを貼ります。

これを行うには、以下のようにします。

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

最後にカラーをトゥイーンする方法が示されています。

この例のプロジェクトとエディタへのリンクを貼ります。

これを行うには、以下のようにします。

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();

ここでもう一度、Tweenライブラリは https://github.com/playcanvas/playcanvas-tween で利用できます。