写点什么

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

  • 2014-05-07
  • 本文字数:889 字

    阅读完需:约 3 分钟

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 ,读者可以参考学习。

参考文档

  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 )关注我们,并与我们的编辑和其他读者朋友交流。

2014-05-07 08:4018641
用户头像

发布了 219 篇内容, 共 146.6 次阅读, 收获喜欢 195 次。

关注

评论

发布
暂无评论
发现更多内容

第二周 - 作业

Happy-Coming

游戏夜读 | 中国移动游戏简史

game1night

【week02】总结

chengjing

架构师训练营第二周作业

路人

「架构师训练营」第2周作业

fujin

ioc 极客大学架构师训练营 第二周作业

架构师训练营 第二周作业

fujin

极客大学架构师训练营

第二周作业

LEAF

架构师训练营 - 第二周学习总结

hellohuan

极客大学架构师训练营

架构师训练营第二周总结

Hanson

架构第二周-学习总结

J.Smile

极客大学架构师训练营

架构师第二周课后作业

傻傻的帅

极客大学架构师训练营

第二章总结

大雄

架构师训练营-W02H-架构设计

b1a2e1u1u

极客大学架构师训练营

架构师训练营第二周课后作业

竹森先生

极客大学 极客大学架构师训练营

第二周总结

Thrine

Netty4.x的Channel相关类图及分析

娄江国

无抽象不架构

菜根老谭

架构 抽象 架构思维 抽象思维

【喜迎端午】够强大,才够出“粽”,加入InfoQ写作平台,领取节日限定头像标识

InfoQ写作社区官方

写作平台 端午节 热门活动

架构师训练营-第2课总结-20200613-软件设计

👑👑merlan

架构总结 软件设计

架构师训练营第2周作业

在野

极客大学架构师训练营

Spring BeanPostProcessor 你不能不知道的事

CoderLi

Java spring 程序员 源码分析 后端

「架构师训练营」第 2 周学习总结

guoguo 👻

极客大学架构师训练营

依赖倒置

陈皮

原创 | TDD工具集:JUnit、AssertJ和Mockito (二十三)编写测试-并行测试

编程道与术

Java 编程 TDD 单元测试 JUnit

架构师训练营-W02S-架构设计

b1a2e1u1u

极客大学架构师训练营

第二周总结

LEAF

依赖倒置原则

清风明月

极客大学架构师训练营

【week02】作业

chengjing

JavaScript中删除树形结构数据里的节点

码字与律动

Java

架构师训练营 No.2 周作业

连增申

架构师训练营作业

Hanson

JQuery动画插件Velocity.js发布:更快的动画切换速度_语言 & 开发_小盖_InfoQ精选文章