vue2+velocity动画学习笔记（2）：velocity知识

最新推荐文章于 2024-04-15 09:45:11 发布

arrowhan

最新推荐文章于 2024-04-15 09:45:11 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/arrowhan/article/details/129396543

版权

引子

前一篇笔记学习了如何在vue中使用velocity，从这开始记录velocity的一些基本知识。代码都是基于vue写的，没有用jquery，书写上可能没有使用jQuery那么方便，一些链式调用可能没法使用。

一个完整的调用

// 当一个元素连续应用多个velocity()时，动画将以队列的方式执行
/** el可以是html原生的获取元素的方法,如getElementById()，querySelectorAll()等，
 1. 也可以使用vue的ref,只要能获取到元素就行
*/
let el = this.$refs.demo
this.Velocity(el, {
   
/**
 2. Velocity 在 1.2.0+ 版本里增加了对 "px, em, rem, %, deg, vw/vh" 这些单位的支持，
 3. 如果不填写属性单位 默认单位还是"px"，但 "deg" 用于 rotateZ 属性时可以省略不写。 
 4. Velocity 还支持动态计算属性值，包括 "+, -, *, /"，还可以设置元素在动画执行前的初始值
 */
top: 100, // 等同于 '100px'
left: '48%',
width: '+=25%', // 宽度叠加
height: '*=2', // 高度翻倍
backgroundColor: ['#0ff','#fff'], // 背景颜色从#fff过滤到#0ff
opacity: 0.5
}, {
   
/* Velocity 动画配置项的默认值 */
duration: 1000,         // 动画执行时间，毫秒，"slow","normal","fast"
easing: 'swing',       // 缓动效果
queue: "",   // 队列
// 动画开始时的回调函数,若循环的话只在第一次循环前执行       
begin: (el) => {
   
  console.log('开始',el);
}, 
// 动画执行中的回调函数（该函数会随着动画执行被不断触发） 
/**
 5. progress为动画执行过程中调用的函数， 依次是elements, complete, remaining, start, tweenValue5个参数：
 6. elements：当前执行动画的元素，可以用$(elements)来获取
 7. complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值 并不带单位 (%)
 8. remaining：整个动画过程还剩下多少毫秒，该值是递减的
 9. start：动画开始时的绝对时间 (Unix time)
 10. tweenValue：动画执行过程中 两个动画属性之间的补间值
*/    
progress: (el, c, r, s, t) => {
   
  console.log('执行中', el, c, r, s, t);
},   
// 动画结束时的回调函数,循环模式下之后一次循环结束后执行一次，需要设置循环次数loop: n
complete: (el) => {
   
  console.log('结束',el);
},   
display: undefined,    // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: true,           // 循环，true无线循环，数字循环有限次
delay: false,          // 延迟，毫秒
mobileHA: true         // 移动端硬件加速（默认开启）
})

需要注意的点有：

连续应用多个动画是，动画依次执行；
在 1.2.0+ 版本里增加了对 “px, em, rem, %, deg, vw/vh” 这些单位的支持，如果不填写属性单位默认单位是"px"，旋转角度默认单位deg，实际使用的时候已代码为准，多测试；
支持动态计算属性值，包括 “+, -, *, /”;
可以设置元素在动画执行前的初始值,例如width:[200,50],初始值50，结尾200；
动画执行时间可以使整数，单位毫秒，也可以是关键字：“slow”,“normal”,“fast”；
动画开始时的回调函数是 begin,若循环的话只在第一次循环前执行，开始函数参数为当前元素；
动画执行中的回调函数是 progress，该函数会随着动画执行被不断触发，包含五个参数，依次是依次是elements, complete, remaining, start, tweenValue，一般el,c,r,s,t接收，当然也可以用其他名字接收。
elements：当前执行动画的元素，可以用$(elements)来获取；
complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值并不带单位 (%)；
remaining：整个动画过程还剩下多少毫秒，该值是递减的；
start：动画开始时的绝对时间 (Unix time)；
tweenValue：动画执行过程中两个动画属性之间的补间值；
动画结束时的回调函数 complete,循环模式下之后一次循环结束后执行一次，需要设置循环次数loop: n；

其他调用方式

除了上面比较正统的调用方法外，还有一些常用的缩写形式。

逗号分割的参数写法，执行时长、缓动效果、结束函数都可以省略

// 这些写法都可以
this.Velocity(el, {
    translateX: 500 }, 'slow', 'swing', (el) => {
   })
this.Velocity(el, 'fadeIn', 'slow')
this.Velocity(el, 'fadeIn', 'slow', 'swing')
this.Velocity(el, 'fadeIn', 'slow', (el) => {
   })
this.Velocity(el, 'fadeIn', 'swing')
this.Velocity(el, 'fadeIn', 'swing', (el) => {
   })
this.Velocity(el, 'fadeIn', (el) => {
   })

可选的单参数语法

// e：element - 元素，一个dom选择器
// p: properties - 属性map { property1: value1, property2: value2, … }
 // o: options - 配置选项
this.Velocity({
    e: el, p: {
    opacity: 0 }, o: {
    duration: 1500 } });

缓动效果

简单点说就是你定义好的options怎样运动。例如linear就是均速执行，缓动关键字支持jQuery ui的缓动关键字、css缓动关键字、css3的赛贝尔曲线、弹簧物理缓动和步骤缓动。

jQuery UI 的缓动关键字

包括以下关键字：
注意，如果用left、top、right、bottom这样的跟定位有关系的，别忘了设置position。

this.Velocity(el, {
    translateX: [500, 10] }, 1500, 'linear') // 匀速
this.Velocity(el, {
    translateX: 500 }, 1500, 'swing') // 先慢后快最后慢
this.Velocity(el, {