JS中常用的动画

1. CSS 动画：

   • 使用 CSS 属性和关键帧来定义动画效果，然后通过 JavaScript 来控制 CSS 类的添加和移除来触发动画。
   • 优点：性能较好，浏览器会对 CSS 动画进行硬件加速。
   • 缺点：相对简单的动画效果，不够灵活。

2. CSS 过渡：

   • 使用 CSS 过渡来实现从一个状态平滑过渡到另一个状态。
   • 通过 JavaScript 来添加或移除 CSS 属性，触发过渡效果。
   • 适用于简单的样式变化，如尺寸、颜色等的平滑过渡。

3. requestAnimationFrame()：

   • 使用 requestAnimationFrame() 方法递归地调用函数，以便在每次浏览器重绘之前更新动画。
   • 可以手动控制动画的每一帧，使得动画效果更加流畅和精确。
   • 适用于实现复杂的自定义动画效果。

4. JavaScript 库（如jQuery）：

   • 使用 JavaScript 库来简化动画的实现，如 jQuery 中的 .animate() 方法。
   • 这些库提供了简单易用的接口，可以快速创建各种动画效果。
   • 适用于快速开发和简单的动画需求。

5. CSS 动画库（如Animate.css）：

   • 使用预先定义好的 CSS 动画效果，如 Animate.css 中提供的各种动画类。
   • 通过 JavaScript 来动态添加或移除 CSS 类，从而触发动画效果。
   • 适用于快速添加动画效果而不需要手动编写 CSS 动画。

6. Web 动画 API：

   • 使用 Web 动画 API（Web Animations API）来通过 JavaScript 控制 CSS 动画和 CSS 过渡。
   • 这个 API 提供了更多灵活性和控制力，可以动态创建、组合和控制多个动画效果。
   • 适用于高级的动画需求，需要更精确的控制和定制化。