JQuery动画插件Velocity.js发布：更快的动画切换速度

首页 > 代码库 > JQuery动画插件Velocity.js发布：更快的动画切换速度

JQuery动画插件Velocity.js发布：更快的动画切换速度

2024-07-03 19:47:13 223人阅读

　5月3日，Julian在其GitHub上发布了Velocity.js。Velocity.js是一款动画切换的jQuery插件，它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小，它不仅包含了$.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属性，具体原理读者可以参考这篇文章。

　　Velocity.js包含两个输入参数，第一个参数用于规定产生的动画效果，第二个参数为可选参数，用于规定动画的额外选项。具体如下：

$("div").velocity({

property1: value1,

property2: value2

}, {

/* Default options */

duration: 400,

easing: "swing",

queue: "",

complete: null,

loop: false,

delay: false,

display: false,

mobileHA: true

});

　　Velocity.js同样支持jQuery的参数简写语法：$element.velocity(propertyMap [, duration] [, easing] [, complete]):,比如：

$("div").velocity({ left: 100 }, 1000);

$("div").velocity({ left: 100 }, 1000, "swing");

$("div").velocity({ left: 100 }, "swing");

　　Velocity.js官方宣传Velocity的目标是成为DOM中动画切换方面的领导者。读者可以从这里下载最新版本的Velocity.js，由于Velocity.js的方法签名和$.animate()一样，因此只需将方法名从animate改为velocity即可。在其官方网站给出了几个绚丽的Demo，读者可以参考学习。

　参考文档

http://julian.com/research/velocity/
http://davidwalsh.name/css-js-animation
https://news.ycombinator.com/item?id=7663775

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > JQuery动画插件Velocity.js发布：更快的动画切换速度