常见的动画类型

  1. gif： 设计直接出GIF，前端直接用
  2. 逐帧动画： css3 step属性 或 js制作逐帧动画
  3. css3 ： transition/ transform/animation
  4. svg : svg 很适合移动端
  5. canvas: canvas适合一些比较大面积的动效
  6. video: 用h5 video标签js动画： 可以配合平台提供的api（重力感应等）开发更复杂的动效

动画的原理

  1. 贝塞尔曲线原理
  2. 视差原理
  3. 阻尼公式
  4. WebGPU 替代 WebGL 成为未来的网页图形技术已经是不可改变的事实

动画库

  1. Halogen 使用React的加载动画集合
  2. react-move 漂亮的，数据驱动的React动画,只需3.5kb（gzip）
  3. react-spring 一个基于弹簧物理学的动画库
  4. Ant Motion 提供了单项，组合动画，以及整套动画解决方案
  5. scenejs 基于JavaScript和CSS时间轴的动画库
  6. react-text-loop 文字轮播动画
  7. react-beautiful-dnd 漂亮,可移植性 列表拖拽库
  8. react-dnd 可帮助我们构建复杂的拖放界面，同时保持组件的分离
  9. react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库
  10. react-grid-layout 强大的网格拖拽排序缩放库
  11. mixitup 强大的列表卡片排序动画库
  12. KeyboardJS 一个在浏览器中使用的库（与node.js兼容）.它使开发人员可以轻松设置键绑定和使用组合键来设置复杂的绑定.
  13. SortableJS 功能强大的JavaScript 拖拽库

移动端动画库

Anime.js

https://animejs.com/
anime文档 https://animejs.com/documentation/
anime github https://github.com/juliangarnier/anime

一个优秀的JavaScript动画引擎，可以和CSS3属性，SVG，DOM元素和JS对象一起工作，
制作出各种高性能，平滑过渡的动画效果。
相比于其他的很多动画库，无论是从使用还是性能角度，anime要更灵活而轻量一些
image.png

intro.js引导动画

https://github.com/usablica/intro.js
为网站和项目提供分步指导新功能介绍的好方法
使用分步引导效果，可以帮助用户更容易的上手

impress幻灯片动画