初識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');
});