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のローカル位置をトゥイーンする方法の例が示されています。

[フレーム]

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

上記を得るために以下を行います:

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

エンティティのローカル回転をトゥイーンする方法の例です:

[フレーム]

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

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

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

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

[フレーム]

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

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

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

最後に、色をトゥイーンする方法です:

[フレーム]

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

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

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

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