# 一、CSS 方法
- 定义: 这种方法是实现动画的最简单、最基础的方式。你不需要导入 JavaScript 库,并且浏览器花费的资源也是最少的。如果你需要实现一个简单的动画,并担心包的大小,可以使用此方法。
在大多数情况下,我们都会使用 CSS 来创建动画,因为它不需要在项目中导入大型库来实现动画,通常几行 css 以及 className 标签就能实现。
# 二、动画库
具体用法可进入对应的官网查看
# ReactJs 库:
- react-motion (opens new window) - 解决动画问题的方案之一。
- react-spring (opens new window) - 基于 Spring 物理的 React 动画库。
- ant-motion (opens new window) - Ant 设计的 Animate 规范和组件。
- react-move (opens new window) - 优雅的,基于数据驱动的动画。
- react-flight (opens new window) - React 构建动画的最佳方法。
- react-flip-move (opens new window) - 使用 FLIP 技术更改 DOM(例如列表重新排序),从而轻松实现 动画 效果。
- react-burger-menu (opens new window) - 位于屏幕之外的侧边栏组件,它使用 CSS 过渡共话和 SVG 路径动画实现。
- animated (opens new window) - 用于 React 和 React Native 的声明性动画库。
- react-tween-state (opens new window) - React 动画。
- react-animations (opens new window) - 内联样式库的动画集合。
# Javascript 库:
- GSAP (opens new window) - 适用于现代网络的超高性能、专业级动画。
- Anime.js (opens new window) - Anime.js(
/ˈæn.ə.meɪ/)是一个轻量级 JavaScript 动画库,具有简单但功能强大的 API。 它适用于 CSS 、SVG、DOM 属性和 JavaScript 对象。 - Popmotion (opens new window) - 用于灵活简单的用户界面的动画库。
- vivus (opens new window) - 在 SVG 上制作绘图动画的 JavaScript 库。
- svg.js (opens new window) - 用于操作动画 SVG 的轻量级库。
- velocity (opens new window) - Velocity 是一个动画引擎,与 jQuery 的 $.animate() 具有相同的 API 。
- wow (opens new window) - 滚动时显示动画,Animate.css 的朋友。
- dynamic.js (opens new window) - 使用这个 Javascript 库创建基于物理的动画。
- granim.js (opens new window) - 使用这个小的 JavaScript 库创建流畅的、交互式的渐变动画。
- kute.js (opens new window) - KUTE.js 是一个原生的 JavaScript 动画引擎,具有出色的代码质量和性能。
- TweenJs (opens new window) - 一个简单但功能强大的 Javascript 动画库。CreateJS 库的一部分。
- moveTo (opens new window) - 一个不依赖任何其它库的轻量级的 javascript 库,用于创建滚动动画。