Velocity.js 动画框架

网页的交互动效大概分为 css动画，js动画
Animate.css属于css动画框架，Velocity.js属于js动画框架
css动画的优点：
不用进行计算和更改dom 会显得非常流畅。
js动画的优点：
没有css那样的局限性，可以实现更多的功能和动效

安装：
npm install velocity-animate

使用方法：
   dom.velocity({/*参数一*/},{/*参数二*/})
   velocity.js 既可以单独用JavaScript使用，也可以配合jquery使用
   参数一：
       需要改变的属性值，如width,height,opacity等
   参数二：
       属性值由原值转变为参数一设定的值的过度效果(即动画效果)
       包含的参数选项：
           duration 动画的持续时间
               单位为ms,可以设置具体的值.
               也可以设置为slow(600ms), normal(400ms), fast(200ms)

           easing 缓动方式
               动画以何种方式进行变换.
               ease-in-out(逐加逐减),ease-in (先加速后匀速),dase-out (先匀速后减速)

           delay 延迟执行
               延迟多少时间执行,单位为ms

           loop 循环次数
               当设置loop: true 表示无限循环

           回调函数执行动画前后涉及函数回调
               begin: function () {...} // 动画开始时的回调函数
               progress: function () {...} // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
               complete: function () {...} // 动画结束时的回调函数

           display 动画结束时设置元素的 css display 属性

           visibility 动画结束时设置元素的 css visibility 属性

           mobileHA // 移动端硬件加速（默认开启 - true）

           queue // 队列

链式使用：
   示例：
       dom.velocity({ width: 75 }).velocity({ height: 0 })
   说明：
       先执行宽度变为75px的动画，等前面的宽度动画结束后，再执行高度变为0的动画

动画指令：
   Fade:淡入淡出
       指令：fadeIn,fadeOut
       dom.velocity("fadeIn", { duration: 1500 })

   Slide:上下滑动
       指令：slideDown，slideUp
       dom.velocity("slideUp", { delay: 500, duration: 1500 })

   Scroll: 滑动
       dom.velocity("scroll", { delay: 500, duration: 1500 })

   Stop: 停止所有动画
       dom.velocity("stop")

   Finish: 完成当前动画
       dom..velocity("finish")

   Reverse: 反转，回到初始状态，如opacity 1 => 0 => 1
       dom.velocity("reverse", { duration: 2000 })

动画效果：
   translation 横移
   scaling 放大缩小
   rotation 旋转
   color 颜色
   svg 矢量变换等等

官网地址：
   http://velocityjs.org/#svg

Velocity.js 动画框架

猜你喜欢