Velocity.js:加速JavaScript动画

velocityjs

Velocity.js是一款动画切换插件,它重新实现了jQuery的$.animate()方法,并且你无须引入JQuery。它比JQuery更快,并实现了变色动画,形变,循环,擦除和SVG支持以及滚动。它是jQueryCSS变换 的最佳组合。

下载

点击这个页面有下载链接,替换所有jQuery的$.animate()为$.velocity()。 你会立刻看到性能的巨大飞跃——尤其在移动设备上。

兼容性

向下一直兼容到IE8和安卓2.3。内部实现中,它模仿jQuery的$ .queue(),因此与jQuery的$ .animate(),$ .fade()和$ .delay()无缝互操作。 由于Velocity的语法与$ .animate()相同,因此你啥代码都不用改。

秘诀

JavaScript和jQuery没法很好地合作。Velocity使用的JavaScript动画很快,而jQuery实现之就很慢。尽管Velocity与jQuery一起工作,但它使用自己的动画栈,并两个基本原则保证性能:1)同步DOM到tween栈以最小化布局变动; 2)缓存值以最小化DOM查询。

检出代码

阅读我的工程师增肌指南

什么人用Velocity

Libscore 列出了一些Velocity的大客户。

如何引入

快速开始Velocity(CDN,2选1即可):

Velocity UI 包(CDN,2选1即可):

包管理器:

npm:

bower:

学习资源

书籍

  1. 亚马逊购买链接。

Demo

  1. 观看 (10分钟): 如何用Velocity构建 一个3D demo
  2. 观看 (5分钟):一个用于解释Velocity的UI包如何改善其用户界面的教程。

帖子

  1. 阅读 Velocity的性能和CSS以及jQuery的对比。
  2. 阅读 Velocity性能优化的技术障碍。
  3. 阅读 如何抛开jQuery只用Velocity实现动画。

官方网站:http://velocityjs.org/
开源地址:https://github.com/julianshapiro/velocity

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

2 9 收藏

资源整理者简介:邢敏

前Web程序员,现攻图形学,专注点:图形和前端,主语言C/C++,副语言php,专注于用一种语言跨多平台。 个人主页 · 贡献了5个资源 · 11 ·       


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer