tween.jsの使用例を詳しく解説

この記事ではtween.jsの詳しい使い方を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。エディターをフォローして見てみましょう

上で述べたように

TweenJS はシンプルだが強力なグラデーション インターフェイスを提供します。グラデーション デジタル オブジェクト プロパティと CSS スタイル プロパティをサポートし、リンクされたトゥイーン アニメーションとアクションを組み合わせて複雑なシーケンスを作成できます。この記事ではtween.jsの使い方を詳しく紹介します

概要

tween.jsを使うと要素の属性値をスムーズに変更することができます。変更する値、アニメーション終了時の最終値、アニメーションにかかる時間、その他の情報をトゥイーンに伝えるだけで、トゥイーン エンジンはアニメーションの開始点からアニメーションの終了までの値を計算できます。滑らかなアニメーション効果を生み出すためのポイント

たとえば、座標が x と y であるオブジェクトの位置があるとします。

var position = { x: 100, y: 0 }

x の値を 100 から 200 に変更したい場合は、次のようにします。

// Create a tween for position first
var tween = new TWEEN.Tween(position);
 
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

ここで作成するだけです トゥイーン オブジェクトを取得したら、それをアクティブにしてアニメーションを開始する必要があります:

// And set it to start
tween.start();

最後に、アニメーション効果を滑らかにするために、TWEEN を呼び出す必要があります。同じループアニメーション内の .update メソッド。コードは次のとおりです:

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

このアクションは、アクティブ化されたすべてのトゥイーンを更新し、position.x は 1 秒 (たとえば、1000 ミリ秒) で 200 になります。

onUpdate コールバック関数を使用して、結果をコンソールに出力することもできます

tween.onUpdate(function() {
  console.log(this.x);
});

この関数は、トゥイーンが更新されるたびに呼び出されます。その頻度は多くの要因によって決まります。例: コンピューターまたはデバイスの実行速度によっては

アニメーションを開始

Tween.js 自体は実行されないため、update メソッドを通じて実行を開始するタイミングを明示的に指示する必要があります。このメソッドはアニメーションのメイン ループで使用することをお勧めします。 requestAnimationFrameメソッドを呼び出すことで良好な画像パフォーマンスを得ることができます

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

ここではパラメータなしの呼び出しメソッドが使用されており、updateメソッドは最後のアニメーションの実行時間を取得するために現在時刻を明確にします。

更新メソッドの時間を指定することもできます:

TWEEN.update(100);

上記のステートメントは、更新時間 = 100 ミリ秒を意味します。このアプローチを使用すると、コード内のすべての時変関数を識別できます。たとえば、アニメーションが開始されており、すべてのアニメーションを同時に進行させたい場合は、アニメーション コードを次のように変更する必要があります:

var currentTime = player.currentTime;
TWEEN.update(currentTime);

アニメーションの制御

【開始と停止】

Tween.start とTween.stopは、トゥイーンアニメーションの開始と終了をそれぞれ制御するために使用されます

終了したアニメーションと開始していないアニメーションについては、Tween.stopメソッドは機能しません。 Tween.start メソッドは時間パラメーターも受け取ります。このパラメータを使用すると、トゥイーン アニメーションは、この回数だけ遅延させた後にアニメーションを開始します。それ以外の場合は、すぐにアニメーションを開始します

【update】

TWEEN.updateメソッドを通じてアニメーションの更新を実行できます

【chain】

複数の複数行を作成する場合、たとえば: 1つのアニメーションが終了した後に別のアニメーションが開始されます。 。これはチェーン方式で実現できます。以下のコードでは、tweenAの後にtweenBがアニメーションを開始します

tweenA.chain(tweenB);

以下のような無限ループアニメーションを作ることができます。

tweenA.chain(tweenB);
tweenB.chain(tweenA);

【繰り返し】

ループアニメーションを作る場合は、chainを使うことができますそれを達成するには、さらに良い方法として、repeat メソッドを使用することです。ループ回数を記述するパラメータを受け取ります

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

【yoyo】

この関数は、repeat メソッドを使用する場合にのみ機能します。アクティブ化すると、トゥイーンの効果はヨーヨー ボールの効果に似ています。その効果は、アニメーションが最初または最後で反対方向にバウンスすることです

[遅延]

遅延メソッドは、アニメーション間の遅延を制御するために使用されます

tween.delay(1000);
tween.start();

グローバルメソッド

次のメソッドTWEEN のグローバル オブジェクトでは、更新メソッドを除くほとんどのメソッドは使用されません:

[TWEEN.update(time)]

このメソッドは、時間が指定されていない場合、すべてのアクティブ化されたトゥイーンに使用されます。現在の時刻。

【TWEEN.getAll と TWEEN.removeAll】

これら 2 つのメソッドは、アクティブ化されたトゥイーン配列への参照を取得するか、配列からすべてのトゥイーンを削除するために使用されます。

【TWEEN.add(tween)とTWEEN.remove(tween)】

は、アクティブ化されたトゥイーンにトゥイーンを追加したり、トゥイーンを削除したりするために使用されます

イージング関数

tween.jsは、いくつかの利用可能なイージングを提供します機能。使用可能な関数は、線形、二次、三次、四次、五次、正弦波、指数関数、円形、弾性、バック、バウンスです。イージングの種類はIn、Out、InOutに分かれています

tween.jsが提供するイージング関数を利用できるだけでなく、イージング関数をカスタマイズすることもできます。ただし、次のルールに従う必要があります

1. パラメーターを受け取る必要があります

2. 入力パラメーターに基づいて値を返す必要があります

イージング関数は、属性の数に関係なく、各トゥイーンが更新されるたびにのみ呼び出されます。変更されました。結果は初期値として使用されます

easedElapsed = easing(k);
for each property:
  newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子：

function tenStepEasing(k) {
  return Math.floor(k * 10) / 10;
}

可以在tween 这样使用它

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是可以在每次tween循环周期的指定时间点调用自定义的函数。

例如：假设想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能通过setter方法，可以通过update方法的回调函数来设置新的setter值

var trickyObjTween = new TWEEN.Tween({
  propertyA: trickyObj.getPropertyA(),
  propertyB: trickyObj.getPropertyB()
})
  .to({ propertyA: 100, propertyB: 200 })
  .onUpdate(function() {
    this.setA( this.propertyA );
    this.setB( this.propertyB );
  });

或者如果想确认tween动画开始后某个对象指定状态下的某个值，可以通过start回调来获取它：

var tween = new TWEEN.Tween(obj)
  .to({ x: 100 })
  .onStart(function() {
    this.x = 0;
  });

【onStart】

tween开始动画前的回调函数。

【onStop】

tween结束动画后的回调函数。

【onUpdate】

在tween每次被更新后执行。

【onComplete】

在tween动画全部结束后执行。

以上がtween.jsの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。