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

目录

• 20个专业H5(HTML5)动画工具推荐
• AnimateMate
• Granim
• FLIP
• Starability.css
• Animsition
• iTyped
• Mojs
• CountUp
• Anime
• Ember Burger Menu
• HTML5 Maker
• HYPE3
• Google Web Designer
• Blysk
• Animatron
• Interaction Plus
• Choreographer.js
• Kute.js

AnimateMate

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

WAIT!

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

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

Starability.css

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

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

iTyped

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

https://github.com/luisvinicius167/ityped

SmoothState.js

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

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

Anime

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

http://animejs.com/

HTML5 Maker

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

http://html5maker.com/

Google Web Designer

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

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

Animatron

https://www.animatron.com/

Choreographer.js

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

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

Kute.js

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

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

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91442 人正在系统学习中