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();
エンティティのローカル回転をトゥイーンする方法の例です:
この例のプロジェクトと