Fabric.js easeInBounce()方法
在游戏或动画中,有许多移动物体可以以线性方式从点A移动到点B,但应用缓动或缓动函数后,可以使其看起来更加自然。缓动函数描述了动画的进度方式。通过这种方式,直线运动可以呈现出有趣的形状。
缓动函数 描述了参数随时间变化的速率。它的方程可以使某物开始时慢慢移动,并在接近结束时加速或减速。请参考Robert Penner的书籍和网页获取缓动函数的详细信息。
easeInBounce()方法 用于实现弹跳缓动效果,
语法:
easeInBounce(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:
index.js
<!DOCTYPE html>
<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 easeInBounce() function
function easeInBounce(t, b, c, d) {
return 1 - easeOutBounce(1 - (t, b, c, d));
}
// Calling the easeInBounce() function over
// the specified parameter values
console.log(fabric.util.ease.easeInBounce(1, 2, 3, 4));
</script>
</body>
</html>
输出:
2.08203125
示例2:
index.js
<!DOCTYPE html>
<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 easeInBounce() function
function easeInBounce(t, b, c, d) {
return 1 - easeOutBounce(1 - (t, b, c, d));
}
// Initializing the parameters with its values
var t = 5;
var b = 10;
var c = 40;
var d = 12;
// Calling the easeInBounce() function over
// the specified parameter values
console.log(fabric.util.ease.easeInBounce(t, b, c, d));
</script>
</body>
</html>
输出:
19.565972222222218