jQuery-velocity.js 插件的简易使用
初识Velocity动画，感觉它并没有那么强大，但是渐渐感觉它的ui动画可以让我们简易的使用到我们的项目中。
Velocity动画的简介：
下载地址：http://www.julian.com/research/velocity/
兼容性：IE8 和 Android2.3
官网的配置代码：
require.config({
paths: {
"jquery": "/path/to/jquery-x.x.x",
"velocity": "path/to/velocity",
// Optional, if you're using the UI pack:
"velocity-ui": "path/to/velocity.ui"
},
shim: {
"velocity": {
deps:
[ "jquery" ]
},
// Optional, if you're using the UI pack:
"velocity-ui": {
deps:
[ "velocity" ]
}
}
});
require([ "jquery", "velocity", "velocity-ui" ], function ($, Velocity) {
/* Your
app code here. */
$("body").velocity({ opacity: 0.5 });
});
Velocity.js的基本用法：
1.引入jQuery.js库
2.引入velocity.min.js库
3.引入velocity.ui.min.js库
官网用法代码：
$element.velocity({
width: "500px",
property2: value2
}, {
/* Velocity's default options */
duration: 400,
easing: "swing",
queue: "",
begin: undefined,
progress: undefined,
complete: undefined,
display: undefined,
visibility: undefined,
loop: false,
delay: false,
mobileHA: true
});
第一个参数 为 CSS属性
第二个参数为 velocity 配置选项
duration : 400 动画时长
easing : “swing”
queue : “”
begin: undefined
progress: undefined
complete: undefined
display: undefined
visibility: undefined
loop: false
delay: false 动画延迟时间
mobileHA: true
制作动画序列的三种方法：
前面两种省略。
我想把最好的方式推荐给大家：
官网的示例代码：
var mySequence = [
{e: $element1, p: {translateX: 100}, o:{duration: 1000}},
{e: $element2, p: {translateX: 200}, o:{duration: 1000, sequenceQueue: false}},
{e: $element3, p: {translateX: 300}, o:{duration: 1000}}
];
$.Velocity.RunSequence(mySequence);
1.创建一个动画序列
var seq = [
{
elements : $('#div1'),
properties : { width: '300px' },
options : { duration : 1000 }
},
{
elements : $('#div1'),
properties : { width: '300px' },
options : { duration : 1000 }
},
{
elements : $('#div1'),
properties : { width: '300px' },
options : { duration : 1000 }
}
];
2.运行动画序列 seq
$.Velocity.RunSequence(seq);
预定义动画和自定义动画：
1.预定义动画
$('#div1').on('mouseover',function(){
$(this).velocity('callout.shake');
});
还有很多预定义动画，这里我根据官网一一列举一下：
callout.bounce
callout.shake
callout.flash
callout.pulse
callout.swing
Callout.tada
transition.fadeIn
transition.fadeOut
transition.flipXIn
transition.flipXOut
transition.flipYIn
transition.flipYOut
transition.flipBounceXIn
transition.flipBounceXOut
transition.flipBounceYIn
transition.flipBounceYOut
transition.swoopIn
transition.swoopOut
transition.whirlIn
transition.whirlOut
transition.shrinkIn
transition.shrinkOut
transition.expandIn
transition.expandOut
transition.bounceIn
transition.bounceOut
transition.bounceUpIn
transition.bounceUpOut
transition.bounceDownIn
transition.bounceDownOut
transition.bounceLeftIn
transition.bounceLeftOut
transition.bounceRightIn
transition.bounceRightOut
transition.slideUpIn
transition.slideUpOut
transition.slideDownIn
transition.slideDownOut
transition.slideLeftIn
transition.slideLeftOut
transition.slideRightIn
transition.slideRightOut
transition.slideUpBigIn
transition.slideUpBigOut
transition.slideDownBigIn
transition.slideDownBigOut
transition.slideLeftBigIn
transition.slideLeftBigOut
transition.slideRightBigIn
transition.slideRightBigOut
transition.perspectiveUpIn
transition.perspectiveUpOut
transition.perspectiveDownIn
transition.perspectiveDownOut
transition.perspectiveLeftIn
transition.perspectiveLeftOut
transition.perspectiveRightIn
transition.perspectiveRightOut
2.自定义动画：
官网推荐代码：
$.Velocity.RegisterEffect(name,{
defaultDuration : duration ,
calls : [
[ { property : value }, durationPercentage, {options} ],
[ { property : value }, durationPercentage, {options} ]
],
reset : { property : value, property : value }
});
下面是我写的代码：
$.Velocity.RegisterEffect ( 'jiangbo.pulse', {
defaultDuration : 300,
calls : [
[ { scaleX : 1.1 }, 0.5 ],
[ { scaleX : 1.0 }, 0.5 ]
]
} );
$('#div1').on('mouseover',function(){
$(this).velocity('jiangbo.pulse');
});
