# 一、CSS 方法

  1. 定义: 这种方法是实现动画的最简单、最基础的方式。你不需要导入 JavaScript 库,并且浏览器花费的资源也是最少的。如果你需要实现一个简单的动画,并担心包的大小,可以使用此方法。

在大多数情况下,我们都会使用 CSS 来创建动画,因为它不需要在项目中导入大型库来实现动画,通常几行 css 以及 className 标签就能实现。

# 二、动画库

具体用法可进入对应的官网查看

# ReactJs 库:

  1. react-motion (opens new window) - 解决动画问题的方案之一。
  2. react-spring (opens new window) - 基于 Spring 物理的 React 动画库。
  3. ant-motion (opens new window) - Ant 设计的 Animate 规范和组件。
  4. react-move (opens new window) - 优雅的,基于数据驱动的动画
  5. react-flight (opens new window) - React 构建动画的最佳方法。
  6. react-flip-move (opens new window) - 使用 FLIP 技术更改 DOM(例如列表重新排序),从而轻松实现 动画 效果。
  7. react-burger-menu (opens new window) - 位于屏幕之外的侧边栏组件,它使用 CSS 过渡共话和 SVG 路径动画实现。
  8. animated (opens new window) - 用于 ReactReact Native 的声明性动画库。
  9. react-tween-state (opens new window) - React 动画
  10. react-animations (opens new window) - 内联样式库的动画集合。

# Javascript 库:

  1. GSAP (opens new window) - 适用于现代网络的超高性能、专业级动画。
  2. Anime.js (opens new window) - Anime.js(/ˈæn.ə.meɪ/)是一个轻量级 JavaScript 动画库,具有简单但功能强大的 API。 它适用于 CSS 、SVG、DOM 属性和 JavaScript 对象。
  3. Popmotion (opens new window) - 用于灵活简单的用户界面的动画库。
  4. vivus (opens new window) - 在 SVG 上制作绘图动画的 JavaScript 库。
  5. svg.js (opens new window) - 用于操作动画 SVG 的轻量级库。
  6. velocity (opens new window) - Velocity 是一个动画引擎,与 jQuery 的 $.animate() 具有相同的 API 。
  7. wow (opens new window) - 滚动时显示动画,Animate.css 的朋友。
  8. dynamic.js (opens new window) - 使用这个 Javascript 库创建基于物理的动画。
  9. granim.js (opens new window) - 使用这个小的 JavaScript 库创建流畅的、交互式的渐变动画。
  10. kute.js (opens new window) - KUTE.js 是一个原生的 JavaScript 动画引擎,具有出色的代码质量和性能。
  11. TweenJs (opens new window) - 一个简单但功能强大的 Javascript 动画库。CreateJS 库的一部分。
  12. moveTo (opens new window) - 一个不依赖任何其它库的轻量级的 javascript 库,用于创建滚动动画。

# 参考

2019 年,实现 React 动画的 5 种方式 (opens new window)