|
|
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>
<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.* 两类。
程序猿的技术大观园：www.javathinker.net
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → Velocity.js动画库的使用
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密