Velocity.js动画库

资料链接：

• velocity 示例
• 一个有意思的Button点击效果

---

1.基础使用

$element.velocity({
    width: "500px",        // 动画属性 宽度到 "500px" 的动画
    property2: value2      // 属性示例
}, {
    /* Velocity 动画配置项的默认值 */
    duration: 400,         // 动画执行时间
    easing: "swing",       // 缓动效果
    queue: "",             // 队列
    begin: undefined,      // 动画开始时的回调函数
    progress: undefined,   // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
    complete: undefined,   // 动画结束时的回调函数
    display: undefined,    // 动画结束时设置元素的 css display 属性
    visibility: undefined, // 动画结束时设置元素的 css visibility 属性
    loop: false,           // 循环
    delay: false,          // 延迟
    mobileHA: true         // 移动端硬件加速（默认开启）
});

---

2.单位和运算符

Velocity 在 1.2.0+ 版本里增加了对 "px, em, rem, %, deg, vw/vh" 这些单位的支持， 如果不填写属性单位 默认单位还是"px"，但 "deg" 用于 rotateZ 属性时可以省略不写。 Velocity 还支持动态计算属性值，包括 "+, -, *, /"，还可以设置元素在动画执行前的初始值，看下面示例：

$element.velocity({
    top: 50,                // 等同于 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在当前值上叠加 5rem
    height: "*=2"           // 每次在当前值上叠乘 2
    color: ["#888", "#000"] 
     // 每次动画执行前，color 的初始值都为"#000"
     //（从"#000"过渡成"#888"）
});

---

3. 动画

• 3.1 缓动关键字（预定义在 Velocity 源码中）
  "linear" "swing" "spring"
  "easeInSine" "easeOutSine" "easeInOutSine"
  "easeInQuad" "easeOutQuad" "easeInOutQuad"
  "easeInCubic" "easeOutCubic" "easeInOutCubic"
  "easeInQuart" "easeOutQuart" "easeInOutQuart"
  "easeInQuint" "easeOutQuint" "easeInOutQuint"
  "easeInExpo" "easeOutExpo" "easeInOutExpo"
  "easeInCirc" "easeOutCirc" "easeInOutCirc"

• 3.2 CSS3 的缓动关键字：
  "ease" "ease-in" "ease-out" "ease-in-out"

• 3.3 CSS3 贝塞尔曲线：
  例如：[ 0.17, 0.67, 0.83, 0.67 ]

• 3.4 弹簧物理缓动（spring physics）
  以2位数组的形式 [ tension, friction ] tension 最大值为 500，friction 最大为20，Spring Physics 示例 你可以在这例子中改变数组中的值 试试效果

• 3.5 步骤缓动（step easings）
  以1位数组的形式 使动画通过指定的步骤过渡到结束值 Step 示例，这有一篇 step 教程

• 3.6 Queue 动画队列
  可以自定义动画队列，但不会立即执行，需要通过dequeue()方法手动执行动画，这有个 Demo 演示了这个过程

// 自定义队列，这里并不会立即执行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒后 执行队列"a"的动画
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒后 执行队列"b"的动画
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);