Velocity.js Option 配置项
2018年2月5日Velocity 提供了丰富的可选配置项,可以更好的控制动画,你也可以利用这些配置做出炫酷复杂的动画特效。
1. Duration 动画执行时间
Velocity 的动画执行时间以毫秒为单位,并支持 jQuery 中的动画速度关键字: “slow”,“normal”,“fast”。
1 2 3 4 |
//设置速度为1000毫秒 $element.velocity({ opacity: 1 }, { duration: 1000 }); // 支持 jQuery 中的动画速度关键字: $element.velocity({ opacity: 1 }, { duration: "slow" }); |
2. Easing 缓动效果
2-1. 默认 5 种缓动方式
- jQuery UI 的缓动关键字(预定义在 Velocity 源码中)
- CSS3 的缓动关键字
- CSS3 贝塞尔曲线
- 弹簧物理缓动(spring physics)
- 步骤缓动(step easings)
1 2 3 4 |
/* 标准写法 */ $element.velocity({ width: 50 }, { easing: "easeInSine" }); /* 简写 */ $element.velocity({ width: 50 }, "easeInSine"); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 使用jQuery UI 的缓动关键字写法 */ $element.velocity({ width: 50 }, "easeInSine"); /* 使用CSS3 缓动关键字写法 */ $element.velocity({ width: 50 }, "ease-in"); /* 使用贝塞尔曲线写法 */ $element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]); /* 使用弹簧物理缓动写法 */ $element.velocity({ width: 50 }, [ 250, 15 ]); /* 使用步骤缓动写法 */ $element.velocity({ width: 50 }, [ 8 ]); |