H5动画调研

2021.4.7 星期三 11：00

小结

strong： Three.js，GreenSockJS
easy：hover.css, cssShake, wickedCSS,animate.css, Magic,Tuesday
Waves,
wow.js, scrollReveal.js,
easy+: anime.js, mo.js, Animate Plus, move.js，Velocity.js;, Bounce.js Lottie
spec: Vivus(svg路径)，parallax.js；Spinkit (加载)；PACE.js（加载进度条）
others: Popmotion.js,Dynamics.js，ParticlesJS
游戏相关：CreateJS，PixiJS，COCOS2DX-JS,

结论

业务没确定。根据ui/ux 选择。
包括依赖大小，性能，成本，成熟度等。

参考

round 1

前端人最值得关注的JS动画库来了
 前端人最值得关注的JS动画库来了
 前端人最值得关注的JS动画库来了

01 Three.js
该库提供<canvas>，<svg>，CSS3D和WebGL渲染器，使我们能够在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次引入，目前仍由近1,000名贡献者开发。

02 Anime.js
Anime.js是一个轻量级JavaScript动画库，具有简单但功能强大的API。

它适用于CSS属性，SVG，DOM属性和JavaScript对象。它可以通过对时间轴的回调实现对动画的控制。通过关键帧实现对动画补充与饱满，在上面几乎可以实现基本动画需要的工作。最关键的是，Anime.js适用于所有网页，你可以使用html，css，js，svg等制作动画。

03 ParticlesJS
ParticlesJS由VincentGarreau创建，是一款特定动画的JavaScript库，用于创建点和线组成的精彩动画。如上所述，该库用于创建看起来像粒子的动画。因此，它允许开发人员切换诸如粒子的密度，颜色，不透明度，形状和大小之类的东西。但是，由于它仅适用于粒子背景，因此不适合用来创建其他类型的动画。

04 Mo.js
Mo.js是一个用于Web的动态图形工具带，具有简单的声明API，跨设备兼容性和超过1500个单元测试。你可以在DOME或SVGDOME周围移动东西或创建唯一的mo.js对象。虽然文档有些稀缺，但是示例很丰富。

Mo.js是一个”简洁、高效”的图形动画库，拥有流畅的动画和惊人的用户体验，在任何设备上，屏幕密度独立的效果都很好，你可以绘制内置的形状或者自定义形状，随便，只要你喜欢，你还可以绘制多个动画，再让它们串联在一起。

05 ScrollReveal
与前面讨论的ParticlesJS一样，这也是一款特定动画的JavaScript库。
ScrollRevealJS用于创建十分酷炫的滚动特效，是一个轻量级的工具（没有任何依赖），而且非常容易使用，因为它使用自然语言来发送创建动画的指令。

ScrollRevealJS适用于DOM节点，多个容器，异步内容，并且支持3D旋转。ScrollRevealJS可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要这些浏览器支持CSSTransform和CSSTransition特性。

06 Popmotion
Popmotion是一个只有12KB的JavaScript运动引擎，可以用来实现动画，物理效果和输入跟踪。

它允许开发人员从动作创建动画和交互，这些动作是可以启动和停止，可以使用CSS、SVG、React、three创建，js和任何接受数字作为输入的API。

07 Vivus
Vivus是一款可以执行SVG路径动画的轻量级Javascript库，如果你在寻找一个使用SVG的优秀库，那么VivusJS是最佳之选，尤其适合初学者。
这个库也很快、很轻量级，因为它没有任何依赖。除了使用SVG之外，VivusJS还可用于创建漂亮的按钮，也有其他令人惊叹的动画可供使用。

08 GreenSockJS
GSAP是一个JavaScript库，用于创建高性能，零依赖的跨浏览器动画，该动画库据称已在超过400万个网站中使用。
GSAP非常灵活，可以与React，Vue，Angular和VanillaJS 一起使用。GSDevtools还可以帮助调试使用GSAP构建的动画。

09 Hover(CSS)
Hover.CSS是一个有用的CSS3悬停效果集合，可用于动作调用，按钮，商标，特性图片等，提供CSS，Sass和LESS支持。

10 Spinkit
Spinkit是一个酷炫的加载动画CSS集合。Spinkit使用CSS动画来创建吸引人的易于自定义的动画。

round 1-2

2019年值得推荐的11款JavaScript动画库

Kute.js
成熟的原生javascript动画引擎，具有跨浏览器动画的基本功能。重点是代码质量、灵活性、性能和大小(核心引擎最小17K，gzip为5.5K)。库也是可扩展的，因此您可以添加自己的功能。

Typed.js
这个6K星的库基本上允许您以选定的速度为字符串来创建输入打字动画。您还可以在页面上放置一个HTML DIV并从中读取，以允许对禁用javascript的搜索引擎和用户进行访问。

Lottie
lottie是一个用于的移动端类库，在Android和iOS端渲染Adobe After Effects的动画，并以本地方式呈现。同样适用于Web、ReactNative和Windows平台。由AirBnb公司出品。

round 2

前端福利！10个免费好用功能强大的网页动画效果库
 10款好用的前端动画插件
 10个免费好用功能强大的网页动画效果库

GSAP
10个免费好用功能强大的网页动画效果库
GSAP 可能目前最炫酷的免费动画库之一了。它运行于纯粹的 JavaScript 之上，是目前最强健的动画资源库之一。

它符合 HTML5 的规范，并且和几乎所有的现代浏览器都能良好的协同，可以SVG、画布元素甚至 jQuery 对象良好地协同，诸如 EaselJS 这样的库也可以和 GSAP 联动。

如果你需要一个强大的网页动画库的话，GSAP绝对值得一看。

Anime.js
我第一次看到Anime.js 这个库的时候，彻底被它迷住了。这玩意非常强大，功能并不仅限于UI/UX动画的制作。

你可以借助 Anime.js 将动画加持在LOGO、按钮、图像等各种各样的元素上。它支持各种常见的触发机制，比如点击、悬停、滑动，你可以借助它定义一系列的动画。

Wicked CSS
Wicked CSS 是一个相对更新一些的动效库，它主要是基于CSS代码的。Wicked CSS 借助 CSS3的特性，提供了一些堪称不可思议的特效。

在它的首页上，你会看到许多实时演示，你可以通过这些范例学会如何让对象进行旋转、翻转、划入等不同类型的动画效果。

有些动画效果很简单，但是它同样可以实现许多复杂而有趣的动画，这也是Wicked CSS 有意思的地方。

Animate CSS
Tuesday
Tuesday 所提供的动画最令人着迷的地方，是其中动画都非常的简单、有用。借助这个库，你可以有效的控制页面中元素的出现和消失的方式。

这些动画并不是那种炫酷屌炸天的，相反它们是非常微妙的，真正从美学和用户体验的层面提升整个页面的设计。

Tuesday 是纯粹的CSS代码，几乎可以和任何网站无缝地衔接起来。

CSShake
坦率的讲，我从来没有见过比 CSShake 更加奇怪或者有趣的 CSS库了。它所带来的动画效果非常的疯狂、独特，它并不一定适合每个网站。

换句话来说，就是 CSShake 所提供的动效其实是独一无二的，这也是为什么它会存在于这个列表当中。

Mo.js
通过细节仔细对比了诸多的 JavaScript 库之后，不得不说 Mo.js 是最好的动效库之一。Mo.JS 非常的庞大，而且它是完全为UI/UX设计而生的动效库。

关于 Mo.js 有大量的文档和教程，它的代码操作并不复杂，了解之后就可以轻松掌握。

它有着许多令人惊叹的功能，无论是导航栏，还是LOGO或者其他复杂的元素，它都能够将他们合理的动画化。

Animate Plus
Animate Plus 是一个轻量级的动效库，它只有2KB，但是它有着自定义 JavaScript 动画所需的全部基本功能。

使用npm你可以轻松地将 Animate Plus 安装好，你只需要按照Github 上的代码进行设置即可。其中所包含的绝大多数都是基本的Demo，所以你不会碰到复杂的问题，不过通过Github，你会找到所有你需要的选项和方法。

Bounce.js
只需要点击几下，你就可以借助Bounce.js创造出强大的CSS3 和 JS动画了。
在主页上，你会找到一个模块化的自定义动画生成器，通过这种方式，Bounce.js 会帮你将特定的功能添加到你的页面上，无需添加额外的代码。

和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直接在浏览器中进行设计和设置的动画库之一。

Magic
Magic 可能是最有趣的动效库之一。它集合了许多基于CSS3的动画效果，并且带有许多在别的地方根本找不到的自定义样式。这是一个非常大的CSS3代码库合集，你也会在这里学会许多巧妙的动画设计技巧。

round x

前端几个常用的动画库汇总

 前端开发动画效果常用的几种动画库
1、AniJS.js
基于 CSS3 的动画库

2、Velocity.js
Velocity 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。它能和 jQuery 完美协作，并和 $.animate() 有相同的 API，但它不依赖 jQuery，可单独使用

3、vivus.js
Vivus 是一款可以执行 SVG 路径动画的轻量级 Javascript 库

4、snabbt.js
snabbt.js 是一款轻量级的、功能强大的、简单易用的 jQuery 动画库插件

5、PACE.js
网页自动加载进度条插件

6、Popmotion.js
Popmotion 是一个只有 12KB 的 JavaScript 运动引擎，可以用来实现动画，物理效果和输入跟踪

7、Bounce.js
Bounce.js 是一个漂亮的关键帧动画生成工具和类库，基于 CSS3 实现

8、Dynamics.js
Dynamics.js 是一款可以创建物理运动动画效果的 js 库插件

9、cta.js
一款轻量级 Modal 模态框插件

10、 Rocket

11、html5tooltips.js
html5tooltips.js 是一个轻量级和简洁的 Tooltips。采用纯 JavaScript 开发，拥有 CSS 动画，不依赖任何框架

12、ScrollReveal.js
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力

13、WOW.js
WOW.js 是一款帮助你实现滚动页面时触发 CSS 动画效果的插件收费的

14、Transit

15、parallax.js
Parallax.js 是一款功能非常强大的 JavaScript 视觉差特效引擎插件。通过这个视觉差插件可以制作出非常炫酷的视觉差特效，可以检测智能设备的方向。

6、CreateJS
CreateJS 库是一款 HTML5 游戏开发的引擎，是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包https://createjs.com/

round 0

前端常用动画库
Anime.js
一个强大的、轻量级的用来制作动画的javascript库。它适用于任何CSS属性，单个CSS转换，SVG或任何DOM属性以及JavaScript对象。

Hover.css
CSS hover 悬停效果，可以应用于链接、按钮、图片等等，提供CSS，Sass和LESS。

Animate.css
目前最通用的动画库，是一个CSS3动画库，内置了很多典型的css3动画，兼容性好使用方便。

wow.js
滚动展示动画，依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果

scrollReveal.js
和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次。WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。

Magic.css
一款独特的CSS3动画特效包，你可以自由地使用在您的网页中。只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css 就可以使用了。

Waves
点击水波纹动画效果

move.js
Move.js是一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。

Velocity.js
Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和.animate()有相同的API，但它不依赖jQuery，可单独使用。Velocity不仅包含了.animate()有相同的API，但它不依赖jQuery，可单独使用。Velocity不仅包含了
.animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和滚动动画等特色功能。

游戏

并没有需求。自取

七、目前5大游戏引擎，同步适配微信小游戏！
Cocos 、 Laya(Layabox) 、Phaser 、 Egret 、 3D - Three.js

PixiJS

PixiJS: https://www.pixijs.com
github: https://github.com/pixijs/pixi.js
前端的canvas动画框架Pixi.js为什么火不起来？
首先pixi.js的定位是一个渲染框架，渲染速度非常快的前端渲染框架了。
但是pixi.js挺适合写游戏的。
我觉得CreateJS也很好用，也没火。当然不能和COCOS 这种引擎相提并论
关键的是现在官方已经放弃这个项目了，bug也不修复了，专弄cocos creator了。

createJS没火因为Adobe自己不上心，半成品没法用。

Cocos

Cocos Creator： https://docs.cocos.com/creator/manual/zh/getting-started/introduction.html
Q：Cocos Creator 是游戏引擎吗？
A：它是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。

关于 Cocos Creator:
Cocos Creator 是以内容创作为核心的游戏开发工具，在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。

Egret

egret: https://www.egret.com
Egret是一套HTML5游戏开发解决方案，产品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。
而核心产品是Egret Engine，是一个基于TypeScript语言开发的一个HTML5游戏引擎，其余的大多是开发和辅助工具。

EgretPro： https://docs.egret.com/egretpro/docs/guide/getting-started-introduction
目前 EgretPro 支持通过命令行的方式发布到 Web 平台。

小结

结论

参考