Html5 - 动画开发相关资源

豆瓣

一：CSS-效果库

• bouncejs 4700+各种跳动，提供工具直接生成css animation代码。
• rocket 100+动画库，用于一个节点移到另一个节点的，如购物车。
• magic animation 4500+类似于animate.css，提 供很多动画效果选择。
• cssshake 2900+各种抖动。
• hover 15000+鼠标hover效果

二：JS-动画库和引擎

• gsap 5300+非常棒的动画引擎库
• velocityjs 11600+ 和jquery api很接近，使用时基本上将$.animate修改成$.velocity()即可。
• scrollmagic 7700+页面滚动相关的动画
• createjs
  包括以下几个部分用于方便富交互功能的实现。
• easejs 5600+更方便地使用html5 canvas, 与之相似的但更强大的库有： pixiui 后者会优先选用webgl进行渲染，比如webgl。
• tweenjs 2000+动画基础库
• soundjs 2100+声效
• preload 1800+预加载资源,更具有特点的是，它提供了一个IDE animate（就是以前强大的Flash）用于动画的生成，可以直接导出h5页面。这样后续简单的动画就可以直接由设计师完成。
• jquery.transit 7100+jquery动画插件
• favicon 7100+在favicon上都能做这么多文章

三、教程和资料

• csstransitionand_animation 阮一峰的css动画教程，适合初学者有个印象。
• CSS3 Transitions, Transforms, Animation, Filters and more! 学习css transition, transform, animation的极佳教程。
• lea.verou 《css揭秘》作者的博客，可以有好些有意思的项目。 比较有用的有
• 纯css实现打字效果
• svg smil animation svg动画。

四、工具

• easings 缓动函数参考
• gradient-generator 渐变色生成
• ceaser css transition cubic-bezier 曲线和代码生成。
• cubic-bezier 同上，cubic-bezier曲线生成。