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');

　　});