到目前为止,在本系列中,您已经学习了如何为不同元素的CSS属性设置动画、如何创建不同的SVG相关动画,以及如何为网页上不同元素的文本内容设置动画。您还可以通过另一种方式使用KUTE.js对网页上的元素进行动画处理,那就是更改不同属性的值。这需要您在项目中包含属性插件。
在本教程中,您将学习如何使用属性插件为KUTE.js中不同类型属性的值设置动画。我们还将讨论可用于控制不同动画速度的不同缓动函数。
缓动函数
现实生活中的物体很少线性移动。它们要么加速,要么减速。甚至加速和减速也以不同的幅度发生。到目前为止,我们所有的动画都是线性进展的。这感觉一点也不自然。在本节中,您将了解KUTE.js提供的所有用于控制不同动画速度的缓动函数。
库中的核心缓动函数包含在开箱即用的核心引擎中。假设您想要将QuadraticInOut缓动应用于动画。这可以通过两种方式实现: