恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
网页动画:JavaScript和CSS3 动效库大全
0.0°
2014-05-28 自译外文 经验/观点 原作者: Awwwards Team 举报 52754 276 194 14

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

 

图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/)

 

 

超级酷炫的滚动效果

 

 

 

更新:2014-05-28

收藏

276人已收藏

PassbyOne

静心

  • 15

    作品

  • 371

    粉丝

  • 7

    关注

  • 移动设计中不可或缺的交互
  • 单页面网站设计的5个技巧
  • UI/UX设计师访谈之Luca Burgio
  • 16个免费图库

    猜你喜欢

      2014-05-28 自译外文 经验/观点 原作者: Awwwards Team 举报 52754 276 194 14

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

      0.0°

      你确定要举报网页动画:JavaScript和CSS3 动效库大全

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年05月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      194
      276
      14

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录