将缓动函数转换为画布上的移动对象？

Question

我正在尝试使用此页面中的这些缓动功能；

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

在我的画布项目中，我想知道是否有人可以阐明如何在我的画布上使用具有 x 和 y 属性的矩形来使用它们。

我知道t 是时间，（我已成功获得帧间隔的增量时间，不确定是否需要）。

如何使用这些函数将缓动效果应用于具有x 和y 属性的矩形，这两个属性是它应该放置在画布上的坐标？

我知道这个问题有点含糊，但我真的不明白这些功能以及它们应该如何与画布上的矩形集成。

谢谢

Answer 1

你可以这样使用它-

(Click here to see working example at 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/

Answer 2

我知道自己编写代码很好；但是如果你想使用一个库，那么这个是相当不错的：

Tween JS

它使用您引用的缓动方法作为支持链接。