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

Question

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

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

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

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

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

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

谢谢

Answer 1

你可以像这样使用它 -

（单击此处查看 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

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

补间 JS

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