html5 strongeaseinout,Fabric.js easeInOutElastic()用法及代码示例

在游戏或动画中，有许多移动的对象可以使它们从点A线性移动到点B，但是在应用缓动或缓动功能后，它可以使其看起来更自然。缓动函数表示如何进行动画播放。这样，直线运动可以呈现出有趣的形状。

缓动函数指定参数随时间的变化率。它的方程使事物在开始时缓慢移动并加速，或在结束时减速。最常见的缓解方程组来自罗伯特·彭纳(Robert Penner)的书和网页。

easeInOutElastic()方法用于减轻和减轻使用该对象的效果。

用法:

easeInOutElastic(t, b, c, d)

参数：此方法接受上述和以下所述的四个参数：

t:此参数保存动画开始的指定时间。例如，如果t的值为0，则表示动画刚刚开始。

b:该参数保存对象在x轴上的指定起始位置。例如，如果b的值为10，则表示对象在x坐标上的起始位置为10。

c:此参数保存对象的指定值更改。例如，如果c的值为30，则意味着对象必须向右移动30，以40结尾。

d:此参数保留整个过程的指定持续时间。例如，如果d的值为2，则表示对象有2秒的时间来执行从10到40的运动。

返回值：此方法返回对象的缓和位置，即对象在特定时间的位置。

范例1：

HTML

// The easeInOutElastic() function

function easeInOutElastic (t, b, c, d) {

var s = 1.70158;

var p = 0;

var a = c;

if (t == 0) return b;

if ((t /= d / 2) == 2) return b + c;

if (!p) p = d * (.3 * 1.5);

if (a < Math.abs(c)) {

a = c;

var s = p / 4;

}

else var s = p / (2 * Math.PI) *

Math.asin(c / a);

if (t < 1)

return -.5 * (a *

Math.pow(2, 10 * (t -= 1)) *

Math.sin((t * d - s) *

(2 * Math.PI) / p)) + b;

return a * Math.pow(2, -10 * (t -= 1)) *

Math.sin((t * d - s)

* (2 * Math.PI) / p) *

.5 + c + b;

}

// Calling the easeInOutElastic() function

// over the specified parameter values

console.log(

fabric.util.ease.easeInOutElastic(1, 2, 3, 4)

);

输出：

2.0359083332712022

范例2：

HTML

// Initializing the parameters

// with its values

var t = 5;

var b = 10;

var c = 40;

var d = 12;

// Calling the easeInOutElastic() function

// over the specified parameter values

console.log(

fabric.util.ease.easeInOutElastic(t, b, c, d)

);

输出：

5.676948575674239