jQuery-velocity.js 插件的简易使用

时间:2022-10-28 21:37:49

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

  });