Anime.js：轻量级 JavaScript 动画库使用指南

技术背景

在前端开发中，动画效果能显著提升用户体验。Anime.js 是一款快速、多功能且轻量级的 JavaScript 动画库，拥有简单而强大的 API。它可以作用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象，为开发者提供了灵活多样的动画实现方式。

实现步骤

安装

如果使用 npm 进行管理，可运行以下命令安装 Anime.js：

1	`npm install animejs`

引入并使用

Anime.js V4 通过导入 ES 模块来使用，以下是一个简单示例：

import {
  animate,
  stagger,
} from 'animejs';

animate('.square', {
  x: 320,
  rotate: { from: -180 },
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});

上述代码中，animate 函数用于创建动画，第一个参数指定要应用动画的元素选择器，第二个参数是动画的配置对象，包含了移动、旋转、持续时间、延迟、缓动函数、循环和交替等属性。

核心代码

以下是一个完整的 HTML 文件示例，展示如何使用 Anime.js 创建动画：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anime.js Example</title>
  <style>
    .square {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
</head>

<body>
  <div class="square"></div>
  <script type="module">
    import {
      animate,
      stagger
    } from 'animejs';

    animate('.square', {
      x: 320,
      rotate: { from: -180 },
      duration: 1250,
      delay: stagger(65, { from: 'center' }),
      ease: 'inOutQuint',
      loop: true,
      alternate: true
    });
  </script>
</body>

</html>