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

AnimateMate

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

20个专业H5(HTML5)动画工具推荐_第1张图片

Granim

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

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

WAIT!

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

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

FLIP

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

https://github.com/GoogleChrome/flipjs

1090294-20180111154214019-1019492807.png

Starability.css

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

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

1090294-20180111154217160-223625781.png

Animsition

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

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

20个专业H5(HTML5)动画工具推荐_第2张图片

iTyped

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

https://github.com/luisvinicius167/ityped

20个专业H5(HTML5)动画工具推荐_第3张图片

Mojs

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

http://mojs.io/

20个专业H5(HTML5)动画工具推荐_第4张图片

SmoothState.js

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

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

1090294-20180111154229316-1592253911.png

CountUp

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

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

1090294-20180111154231207-1528303846.png

Anime

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

http://animejs.com/

Ember Burger Menu

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

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

20个专业H5(HTML5)动画工具推荐_第5张图片

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 视频编辑平台。

https://www.animatron.com/

Interaction Plus

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

1090294-20180111154357082-430247053.png

Choreographer.js

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

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

20个专业H5(HTML5)动画工具推荐_第6张图片

Kute.js

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

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



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

转载于:https://www.cnblogs.com/ChenChunChang/p/8268780.html

你可能感兴趣的