Velocity.js_ 加速js动画_前端开发者

前端开发者丨JavaScript

Velocity.js是一款动画切换插件， 它重新实现了jquery的 $.animate() 方法， 并且你无须引入jquery。 它比jquery更快， 并实现了变色动画， 形变， 循环， 擦除和SVG支持以及滚动。 它是jquery和css变换 的最佳组合。 n n下载 n n点击这个页面有下载链接， 替换所有jquery的$.animate() 为$.velocity()。 你会立刻看到性能的巨大飞跃—— 尤其在移动设备上。 n n兼容性 n n向下一直兼容到IE8和安卓2 .3。 内部实现中， 它模仿jquery的$.queue()， 因此与jQuery的$.animate()， $.fade() 和$.delay() 无缝互操作。 由于Velocity的语法与$.animate() 相同， 因此你啥代码都不用改。 n n秘诀 n nJavaScript和jQuery没法很好地合作。 Velocity使用的JavaScript动画很快， 而jQuery实现之就很慢。 尽管Velocity与jQuery一起工作， 但它使用自己的动画栈， 并两个基本原则保证性能： 1） 同步DOM到tween栈以最小化布局变动;

2） 缓存值以最小化DOM查询。 n n检出代码 n n阅读我的工程师增肌指南。 n n什么人用Velocity n nLibscore 列出了一些Velocity的大客户。 n n如何引入 n n快速开始Velocity（ CDN， 2 选1即可）： n n < script src = “//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js”></script> <script src=”//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js”></script> 1 2 <script src = “//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js” > </script> <script src = “//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js” > </script>Velocity UI 包（CDN，2选1即可）：<script src=”//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js”></script> <script src=”//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js”></script> 1 2 <script src = “//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js” > </script> <script src = “//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js” > </script>包管理器：npm:npm install velocity-animate 1 npm install velocity – animatebower:bower install velocity 1 bower install velocity

学习资源书籍Demo帖子官方网站：http://velocityjs.org/

开源地址：https://github.com/julianshapiro/velocity

前端开发者丨JavaScript