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

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

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

2 个答案: