Velocity的使用方法
Posted sunchao0709
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Velocity的使用方法相关的知识，希望对你有一定的参考价值。
什么是Velocity？
Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。
它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。
Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 android 2.3。
Velocity的使用步骤
1.导入模块
1.1单独导入velocity.min.js模块
// 无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上 (window.velocity)
// ( 第一个参数为原生js的dom选择器 )
Velocity(document.getElementById("dummy"), {
opacity: 0.5
}, {
duration: 1000
});
// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
opacity: 0.5
}, {
duration: 1000
});
1.2导入jquery.min.js、velocity.min.js模块。(注意：使用 jQuery 时，必须在 Velocity 之前加载 jQuery：)
<body> <!-- dom --> <div class="element"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script> </body>
2.利用Velocity实现动画
Velocity接收一组 css 属性键值对 (css map) 作为它的第一个参数，该参数作为动画效果的最终属性。第二个参数是可选参数 为动画的额外配置项。下面为参数的写法：
$element.velocity({
width: "500px", // 动画属性 宽度到 "500px" 的动画
property2: value2 // 属性示例
}, {
/* Velocity 动画配置项的默认值 */
duration: 400, // 动画执行时间
easing: "swing", // 缓动效果
queue: "", // 队列(你可以通过设置多个queue:"" 强制并行执行多个新动画：)
begin: undefined, // 动画开始时的回调函数
progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
complete: undefined, // 动画结束时的回调函数
display: undefined, // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false, // 循环(注意点: 从初始位置到指定位置再到初始的位置算一次)
delay: false, // 延迟
mobileHA: true // 移动端硬件加速（默认开启）
});
Velocity常用事件
progress为动画执行过程中调用的函数， 有elementscomplete, remaining,start, tweenValue5个参数：
elements：当前执行动画的元素，可以用$(elements)来获取
complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值 并不带单位 (%)
remaining：整个动画过程还剩下多少毫秒，该值是递减的
start：动画开始时的绝对时间 (Unix time)
tweenValue：动画执行过程中 两个动画属性之间的补间值
progress: function(elements, complete, remaining, start, tweenValue) {
console.log((complete * 100) + "%");
console.log(remaining + "ms remaining!");
console.log("The current tween value is " + tweenValue)
}
//简写progress
progress: function(elements, c, r, s, t) {
console.log("The current tween value is " + t)
}
以上是关于Velocity的使用方法的主要内容，如果未能解决你的问题，请参考以下文章