BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 郭蕾 关注 8 他的粉丝 发布于 2014年5月8日. 估计阅读时间: 4 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

5月3日,Julian在其GitHub上发布了Velocity.js。Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能,它是jQueryjQuery UICSS变换 在动画方面的最佳组合。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,读者可以参考学习。

参考文档

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

感谢杨赛对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT