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:
上記を得るために以下を行うことができます:
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:
上記を得るために以下を行うことができます:
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にあります。