Wells

基本用法即配置属性

$(function(){
  $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
  });
});

序列动画的实现三种方式

通过delay控制

  $element1.velocity({
    width: '300px'
  }, {
    duration:3000
  });

  $element2.velocity({
    width: '300px'
  }, {
    duration: 3000
    delay: 3000
  });

缺点：duration发生改变后，delay需要重新计算，代码不易维护

complete函数

$element1.velocity({
    width: '300px'
  }, {
    duration:3000,
    complete: function(){
      $element2.velocity({
        width: '300px'
      }, {
        duration: 3000
      });
    }
  });

缺点：会导致过深的嵌套，代码缺乏可读性

通过sequences来实现

var seq = [
  {
    e: $element1, p: {width: '300px'}, o: {duration: 1000}
  },
  {
    e: $element2, p: {width: '300px'}, o: {duration: 1000}
  },
  {
    e: $element3, p: {width: '300px'}, o: {duration: 1000}
  }
]
$.Velocity.RunSequence(seq);

预定义动画效果，自定义动画

调用velocity自定义动画velocity预定义动画

$element1.on('mouseover', function(){
  $(this).velocity('callout.shake');
})

实现自定义动画

The UI pack allows you to register custom effects, which also accept the special stagger, drag, and backwards options. Once registered, an effect is called by passing its name as Velocity’s first parameter: $element.velocity(“name”).

自定义动画语法:

$.Velocity.RegisterEffect(name, {
    defaultDuration: duration,
    calls: [
        [ { property: value }, durationPercentage, { options } ],
        [ { property: value }, durationPercentage, { options } ]
    ],
    reset: { property: value, property: value }
});

demo

$.Velocity.RegisterEffect('lixin.pulse', {
  defaultDuration: 300,
  calls: {
    [{scaleX: 1.1}, 0.5],
    [{scaleX: 1.0}, 0.5]
  }
});

$element.on('mouseover', function(){
  $(this).velocity('lixin.pulse');
});