20个专业H5(HTML5)动画工具推荐

AnimateMate

可能是最好的 Sketch 动画插件。Sketch 目前被广泛应用于 HTML5 的原型界面设计，或者被应用于数据可视化的，动画部分则一般经由软件 Principle 等实现。不过现在，你可以选择一款实用的 Sketch 插件直接在 Sketch 中输出高品质的 WEB 动画。你可以向本公众号回复「Animate」下载该插件。

Granim

一个骚气的 js 库。用于快速创建 WEB 内的令人叹为观止的渐变动画，网址是▼

https://sarcadass.github.io/granim.js/

WAIT!

动效速度测试平台。当我们在 WEB 中构建了一些迷你的 PNG 或者 SVG 图标动画时，如何快速确定动画的延时、间隔、速度关系？反复调整和预览着实令工程师头疼。所以这个网站着力解决关键帧百分比的快速计算问题▼

http://waitanimate.wstone.io/#!/

FLIP

动画绝对值计算器。通过对动画的第一帧和最后一帧截取，测算有关宽、高、左边距、顶边距等运动绝对参数▼

https://github.com/GoogleChrome/flipjs

Starability.css

评星系统交互模板。如果你的 HTML5 开发牵涉到评星功能，这个 CSS 组件库就可以帮上忙了▼

http://blog.lunarlogic.io/starability/

Animsition

过渡动画库。目前预存了 58 种过渡动画，各种 Fade 各种 Rotate 各种 Flip 各种 Zoom，可以让过渡动画像 AE 过渡插件一样便捷载入▼

http://git.blivesta.com/animsition/

iTyped

打字动画。不需要依赖 jQuery 的打字机效果动画，可以调节速度和大小的小巧工具▼

https://github.com/luisvinicius167/ityped

Mojs

CSS 动效库。这是一个正在不断开发完善的 库，虽然目前还未开放路径、弹性等控件，但是它的 CSS 形状库已经非常令人惊喜▼

http://mojs.io/

SmoothState.js

加载优化。对于首页的启动、回跳进行加载动画优化，这对移动端 H5 营销来说尤其重要▼

https://github.com/miguel-perez/smoothState.js

CountUp

计数器模板。一个简洁的计数器跳动 js 组件，可以用于在 WEB 完成诸如访问量、分数展示等和数字有关的计数动画▼

http://inorganik.github.io/countUp.js/

Anime

CSS/JS 动画分享库。像一个在线小商城，有很多开发者自己上传的千奇百怪的 CSS 或者 JS 动画可以参考和引用▼

http://animejs.com/

Ember Burger Menu

汉堡式菜单样式生成器。越来越多的站点在自适时采用汉堡式折叠菜单，而这个网站就可以快速更改这种菜单的具体属性，并引用到你自己的项目中去▼

https://offirgolan.github.io/ember-burger-menu/

HTML5 Maker

HTML5 动画制作器。这个网站的性质和《》中提到的差不多，适合开发者快速生成一些原型作品▼

http://html5maker.com/

HYPE3

专业级本地 HTML5 设计软件。很早以前就向大家推荐过，基于平行时间线逻辑的 HTML5 可视化设计开发平台，你甚至可以用它做一个脱机的交互演示文稿▼

http://tumult.com/hype/

Google Web Designer

以视觉设计为核心的代码可扩展工具。用来做布局和设备终端适配测试比较方便，界面很有 AE 的风格▼

https://www.google.com/webdesigner/

Blysk

HTML5 动画制作器。界面很古板，有点像十年前的一些 FLASH 制作器，所以你甚至可以在上面考虑试试 FLASH 风的火柴人漫画，当然用 HTML5 手法实现▼

http://bly.sk/

Animatron

HTML5 视频编辑平台。<video> 作为 HTML5 的重要特性，很多开发者却仍然搞不清它的发布形式和加载策略，那么在 Animatron 上你可以快速编辑 HTML5 环境下的视频，利用它的自带动画素材库完成有趣的扁平风格卡通动效组件或者视频▼

https://www.animatron.com/

Interaction Plus

交互设计 JS 插件。你可以在 envato 上搜索到这款付费插件，提供了不少浮窗、按钮等素材。

Choreographer.js

CSS 动效库。试着在页面打开后滚动鼠标滚轮，你会发现有趣的事情正在发生，它就是一个收集了大量趣味 CSS 动效库的网站▼

https://christinecha.github.io/choreographer-js/

Kute.js

JS 动效库。内容丰富，首页的几个演示就非常叹为观止，也是 HTML5 圈的良心分享网站▼

http://thednp.github.io/kute.js/

来源： http://www.sohu.com/a/150155227_678107