如何重新排列这些缓动函数以接受 v0、v1 和 t？

Question

例如，本要点中提供的缓动函数：https://gist.github.com/gre/1650294 将是完美的，但我不知道如何修改它们以便它们采用 v0、v1 和 t 参数，就像这个 lerp 函数 I目前有：

_lerp2: function(v0, v1, t) 
{
    return (1 - t) * v0 + t * v1;
}

此处提供的缓动看起来也不错：http://gizma.com/easing/ 但在这种情况下，我不理解 "change in value" 参数。即使我这样做了，我可能仍然希望那些函数只接受三个参数，v0、v1 和 t。

参数如下：v0=起始值，v1=结束值，t=0和1之间的值。例如，如果t=0.5，那么lerpreturnsv0和1的平均值例如 v1。对于这些其他缓动函数，我需要同样的行为。

或者如果修改这些缓动太难，我能否以某种方式修改现有的工作 lerp 函数，比如二次缓动？

Answer 1

从您提供的第一页修改缓动函数。

将以下参数添加到所有函数定义中。

例如

var linear = function (t) { 
    return t 
};

变成

var linear = function (t, start, end) { 
    return t 
};

其中 start 是 t= 0 时的值，end 是 t = 1;

时的值

然后在每个函数中去掉return值赋值给t;

var linear = function (t, start, end) { 
    return t 
};

变成

var linear = function (t, start, end) { 
    t = t;
    // temp remove return
};

然后我们将 t 的新值插入 Start 和 end 之间。这是通过将 start 和 end 之间的差异乘以 t（仍在 0-1 范围内）来缩放范围，然后添加 start 相对于开始移动新值。

var linear = function (t, start, end) { 
    t = t;
    t = (end - start) * t;
    t += start;
    return t;
};

// can be done in one line

var linear = function (t, start, end) { 
    return (end - start) * t + start;
};

// or
var easeOutQuart = function (t) {
    return 1-(--t)*t*t*t 
}

// becomes
var easeOutQuart = function (t, start, end) {
    return (end - start) * (1-(--t)*t*t*t) + start ;
}

例子

easeOutQuart(0.5, 10, 20); //  t@0 returns 10 and t@1 returns 20 
easeOutQuart(0.5, 40, -10); //  t@0 returns 40 and t@1 returns -10 
easeOutQuart(0.5, -10, 30); //  t@0 returns -10 and t@1 returns 30

如何重新排列这些缓动函数以接受 v0、v1 和 t？

How to rearrange these easing functions to accept v0, v1 and t?

javascript

function

canvas

transition

easing