Velocity.js动画库使⽤
1、简介
Velocity 是⼀个简单易⽤、⾼性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的API，但它不依赖 jQuery，可单独使⽤。
2、兼容性
可兼容到 IE8 和 Android 2.3。
若需要兼容 IE8，就必须引⼊ jQuery 1.x
3、⽰例代码(注意⽂件引⽤路径)
（1）index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>velocity.js使⽤</title>
</head>
<body>
<div class="box" id="div1">
</div>
<div class="box" id="div2">
</div>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/velocity.min.js" type="text/javascript" charset="utf-8"></script>
<!--velocity.ui 在 velocity 之后加载-->
<script src="js/velocity.ui.min.js" type="text/javascript" charset="utf-8"></script>
js合并两个数组<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
（2）style.css
.box{
width: 100px;
height: 100px;
background-color: pink;
}
(3)index.js
(function($) {
//    $('#div1').velocity({
//        width: '300px'
//    }, {
//        //动画时长
//        duration: 3000,
//        //动画执⾏完后执⾏的回调
//        complete: function() {
//            $('#div2').velocity({
//                width: '300px'
/
/            }, {
//                duration: 3000
//            })
//        }
//    });
//动画序列
//    var seq = [{
//            elements: $('#div1'),
//            properties: {
//                width: '300px'
//            },
/
/            options: {
//                durations: 1000
//            }
//        },
//        {
//            elements: $('#div2'),
//            properties: {
//                width: '300px'
//            },
//            options: {
//                durations: 1000
/
/            }
//        }
//    ];
//    $.Velocity.RunSequence(seq);
//预定义动画
$('#div1').on('mouseover',function(){
$(this).velocity('callout.shake')
});
})(jQuery);
4、使⽤
（1）参数配置：
$element.velocity({
properties: { opacity: 1 },
options: { duration: 500 }
});
// 或者：
$element.velocity({
p: { opacity: 1 }, // 可以将 properties 简写成 p
o: { duration: 500 }
});
基础配置：
$element.velocity({
width: "500px",        // 动画属性宽度到 "500px" 的动画
properties: value2      // 属性⽰例
}, {
/* Velocity 动画配置项的默认值 */
duration: 400,        // 动画执⾏时间
easing: "swing",      // 缓动效果
queue: "",            // 队列
begin: undefined,      // 动画开始时的回调函数
progress: undefined,  // 动画执⾏中的回调函数（该函数会随着动画执⾏被不断触发）
complete: undefined,  // 动画结束时的回调函数
display: undefined,    // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false,          // 循环
delay: false,          // 延迟
mobileHA: true// 移动端硬件加速（默认开启）
});
（2）Complete属性
complete为动画结束时的回调函数，在⽆限循环模式下（设置loop: true）该回调函数将不会执⾏，但是有规定次数的循环模式下（⽐如设置设置loop: 3）该回调函数将只会在最后⼀次循环结束后执⾏⼀次。
（3）delay属性
和 jQuery 的$.delay()⽅法⼀样，动画将会延迟所设定的毫秒后执⾏。
（4）⽀持SVG动画
（5）velocity.ui.js
velocity.ui.js 是 velocity.js 的动画插件（1.8 KB ZIP’ed）我们可以⽤它快速创建炫酷的动画特效，它依赖于 velocity.js。
elocity.ui 有2个重要⽅法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()
前者允许你将多个 Velocity 动画合并存储到⼀个⾃定义数组⾥，你可以通过引⽤该数组的名称在项⽬中复⽤，后者能帮你改进嵌套的动画序列使得更易于管理。
Velocity.ui.js 内置了很多常⽤的动画特效，分为 callout.* 和 transition.* 两类。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。