1

このページからこれらのイージング関数を使用しようとしています。

https://gist.github.com/gre/1650294

私のキャンバス プロジェクトでは、x と y のプロパティを持つキャンバス上の四角形でこれらを使用する方法について誰かが光を当てることができるかどうか疑問に思っています。

時間は理解tしています (フレーム間隔のデルタ時間を取得することに成功しましたが、これが必要かどうかはわかりません)。

これらの関数を使用して、キャンバス上に配置する場所の座標であるxandプロパティを持つ四角形にイージング効果を適用するにはどうすればよいですか?y

この質問が漠然としていることは承知していますが、これらの機能と、キャンバス上の長方形と統合する方法を本当に理解していません。

ありがとう

4

2 に答える 2

2

このように使用できます-

(ここをクリックして、jsfiddle の実際の例を参照してください)

var x = 100; //final position
var t = 0;   //0-1, this is what you change in animation loop

あなたのループで：

function myLoop() {

    var tx = EasingFunctions.easeInQuad(t) * x;    

    // set element by tx

    if (t < 1) {
        t += 0.1; //determines speed
        requestAnimationFrame(myLoop);
        //setTimeout(myLoop, 16); //option to above
    }
}

参照:
http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/

于 2013-06-16T22:01:10.217 に答える
1

自分でコードを書くのはいいことだと思います。しかし、ライブラリを使用したい場合は、これはかなり良いです:

トゥイーンJS

チェーンをサポートするため、参照したイージング メソッドを使用します。

于 2013-06-16T23:15:28.827 に答える