网页动画:JavaScript和CSS3 动效库大全

我们将向大家展示下网页动画的现状地图,并收集了一些具有多变表现力的类库、框架和插件。

 

图1:网络动画地图

下图分为三个区域,第一部分是一些容易理解的动画类库,撇开已经达到期望的通用动画方法外,还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素,也挑选出了能够和SVG,WebGL或者HTML5 Canvas相连接的动画类库。

 

 

图2:工具列表

第二部分是专为文档模型中像滚动动画,视差,CSS sprite,3D变换,物理引擎和过渡这种动画元素提供不同的方法。

 

 

图3:表现技巧

最后一个重要的部分,也就是第三部分展示了一些能够帮助你根据项目要求来选择CSS或者Javascript为基础的动画的技巧。

 

 

我们相信你已经意识到CSS和以JavaScript为基础的动画备受争议,你会用自己的实际体验来选择。运行在你电脑上的每个项目最终的选择都决定于浏览器版本。好吧,从没人说过这很简单。

 

参考阅读:

我们能做的就是推荐一些有趣的文章和观点,当你需要做决定的时候提供一点点帮助。

[1] Myth Busting: CSS Animation vs. JavaScript,作者Jack Doyle给我们大致比较了一下以JavaScript为基础的动画和CSS动画组件。

[2] CSS Animations and Transitions Performance: Looking inside the Browser,作者Adobe网络团队。我们为你推荐这个文章是其完美的诠释了浏览器渲染的过程和问题。

[3] 第三篇,可能是最臭名昭著的一篇来自Paul Irish的Why Moving Elements with Translate() is better than Pos:abs Top/Left.

[4] Paul Irish另一篇是他与Paul Lewis 一起讨论的High Performance Animations.

[5] 不会被超越的,也是来自Paul Lewis的包含他对动画变现力深刻见解的Leaner, Meaner, Faster Animations with requestAnimationFrame.

 

特色工具:

工具太多了,现在的编辑器又不能加链接,所以请各位去原文地址点击链接。前文也复制了一些链接,如果失效,也请移驾原文,谢谢观看。

1.scrollReveal.js (http://h5bp.github.io/Effeckt.css/)

 

达成“滚动获取动效”的效果,这是JulianLloyd的开源项目

2.svg.js (http://www.svgjs.com/)

 

这是其中支持的一个效果

svg.js让设计师可以更得心应手的处理svg图像(包括动画效果)

3.three.js (http://threejs.org/)

 

 

Three.js是一款轻量化的JS库,能够用来创造3D动画,Three.js可以和Html 5 Canvas元素,SVG以及WebGL结合

4.Agile CSS3 引擎 (http://a-jie.github.io/Agile/#page-nav-top)

 

其中的一个demo演示

agile使用JS生成纯CSS3代码,无html canvas,无webGL,无SVG。在移动端Agile的表现力极佳!

5.Jaguarjs(Collie) (http://jindo.dev.naver.com/collie/index.html#about)

 

 

Collie是一款JS库,可以帮助设计师用HTML5构建效果极佳的动画和游戏。Collie使用了HTML5 和 DOM,能够很好地运行在移动端和桌面端,并且针对不同平台,提供最优渲染模式。

6.Effeckt.js (http://h5bp.github.io/Effeckt.css/)

 

 

精良的动效库,基于CSS的动效能够开启硬件加速

 

7.Skrollr (http://prinzhorn.github.io/skrollr/

 

JS库,提供出众的视差滚动效果,仅有12k大,支持移动端和桌面端

 

8.Clickstream.js (http://git.blivesta.com/clickstream/)

 

 

丰富的页面转换效果

 

9.Parallax.js (https://github.com/wagerfield/parallax

 

 

Parallax的引擎能够针对设备屏幕方向和尺寸做出相应。如果设备没有陀螺仪和运动传感器,那么用光标来代替。

 

10.Stellar.js (http://markdalgleish.com/projects/stellar.js/

 

 

超级轻松即可实现视差滚动效果。

 

11.Physics.js 需翻墙 (http://wellcaffeinated.net/PhysicsJS/#demo-7

 

 

模块化、易于扩展的JS物理引擎

 

12.animate.css (http://daneden.github.io/animate.css/)

 

简单、易用、强大,无需赘言

 

13.Matter.js (http://brm.io/matter-js/

 

html5 javascript物理引擎,包括物理特性,冲撞特性,canvans渲染,webGL渲染

 

14.Box2dweb (https://code.google.com/p/box2dweb/)

 

 

又一个物理引擎

 

15.Morf.js (http://www.joelambert.co.uk/morf/

 

 

支持CSS3硬件加速,可定制缓动函数

 

16.Snap.svg(http://snapsvg.io/)

 

轻松创建可交互矢量图形,方便适配多种设备。

 

17.Impress.js (https://github.com/bartaz/impress.js

 

 

非常棒的演示框架,利用了CSS3 转换效果

18.Transit (http://ricostacruz.com/jquery.transit/

超级流畅的CSS动效

 

19.Sly (http://darsa.in/sly/

 

 

JS库,主要可用于轮播效果

20.Magic Animation (http://www.minimamente.com/example/magic_animations/

 

 

CSS3特效动画

 

21.Superscrollorama (http://johnpolacek.github.io/superscrollorama/)

 

 

超级酷炫的滚动效果

来自:UI中国

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*