Fabric.js easeInOutBounce() 方法
在游戏或动画中,有许多移动的物体可以直线地从A点移动到B点,但是通过应用缓动或缓动函数,可以使其看起来更加自然。缓动函数描述了动画如何进行。这样,直线运动可以变得有趣。
缓动函数 指定了参数随时间变化的速率。它的方程使得物体在开始时缓慢移动,然后加速或在接近结束时减速。最常见的缓动方程集来自Robert Penner的书和网页。
easeInOutBounce() 方法 用于产生弹跳效果的缓动效果,可以应用于物体上。
语法:
easeInOutBounce(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>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// The easeInOutBounce() function
function easeInOutBounce(t, b, c, d) {
if (t < d / 2) {
return easeInBounce (t * 2, 0, c, d) *
0.5 + b;
}
return easeOutBounce(t * 2 - d, 0, c, d) *
0.5 + c * 0.5 + b;
}
// Calling the easeInOutBounce() function over
// the specified parameter values
console.log(
fabric.util.ease.easeInOutBounce(1, 2, 3, 4)
);
</script>
</body>
</html>
输出:
2.3515625
示例2:
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// Initializing the parameters with its values
var t = 5;
var b = 10;
var c = 40;
var d = 12;
// Calling the easeInOutBounce() function over
// the specified parameter values
console.log(
fabric.util.ease.easeInOutBounce(t, b, c, d)
);
</script>
</body>
</html>
输出:
25.79861111111111