动画类库(2)Velocity.jsVelocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQu

慕课网教学视频：www.imooc.com/learn/471

简介：

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和 $.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了$ .animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和滚动动画等特色功能。它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。

使用：

① velocity的引入 (通过npm安装) npm install velocity-animate (可以使用script标签引入)

<script src="../lib/velocity.min.js"></script>

② Velocity语法 Velocity.js可以在不引入jQuery的情况下单独使用。如果你需要大部分动画效果能兼容 IE8，就必须引入 jQuery 1×。它也可以和 Zepto 一起使用，写法和jQuery一样，Velocity使用和jquery相同的语法。换句话说，如果你熟悉jquery的animate()函数，那么你只需把animate()语法套用在velocity()就行。

// 无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上(window.velocity)
// ( 第一个参数为原生js的dom选择器 )
Velocity(document.getElementById("dummy"), {opacity: 0.5}, {duration: 1000});

// 使用 jQuery 或 Zepto 时

$("#dummy").velocity({opacity: 0.5}, {duration: 1000});

③ Arguments 参数参数预览： Velocity 接收一组 css 属性键值对 (css map) 作为它的第一个参数，该参数作为动画效果的最终属性。第二个参数是可选参数为动画的额外配置项。

$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 // 移动端硬件加速（默认开启）
});

对象字面量的参数写法： Velocity 也支持 single-argument 的语法

$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});

// 或者：

$element.velocity({
    p: { opacity: 1 }, // 可以将 properties 简写成 p
    o: { duration: 500 }
});

逗号分割的参数写法（类似 $.animate）：

$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("H"); });

④ Properties Map 动画属性如果不写属性值的单位, Velocity 会将像素(px)作为默认单位.

// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 但你不能这样写！因为这样相当于为 padding 赋了多个值
$element.velocity({ padding: "1 1 1 1" }); // error、

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

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

⑤ Chaining 链式动画当一个元素连续应用多个velocity()时，动画将以队列的方式执行$element

/* 先执行宽度变为75px的动画 */
.velocity({ width: 75 })
/* 等前面的宽度动画结束后，再执行高度变为0的动画 */
.velocity({ height: 0 });

动画类库(2)Velocity.js

官网地址：github.com/julianshapi…

源码地址：github.com/julianshapi…

慕课网教学视频：www.imooc.com/learn/471

简介：

使用：