用Velocity.js快速创建动画

2014-11-18阅读(4620)评论(0)

W3Cways.com 微信公众号

概述

Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。
Velocity.js压缩后仅9KB,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能,它是jQuery、 jQuery UI、CSS变换 在动画方面的最佳组合。
Velocity.js支持IE8+、Chrome、Firefox等浏览器,并支持Andriod以及IOS。
Velocity.js在内部实现中使用了jQuery的$.queue()方法,因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅,其性能也高于CSS的animation属性.

参数

$element.velocity({
    width: "500px",
    property2: value2
}, {
    /* Velocity's 默认配置 */
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    mobileHA: true
});

默认选项值可以通过修改$.Velocity.defaults覆盖。

同时也支持对单个对象使用

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

Demos移步官网看下官网的
Velocity.js官网:http://julian.com/research/velocity/

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 用Velocity.js快速创建动画

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们