前端动画是提升用户体验、增强网站活力的重要手段。虽然现在有很多复杂的动画库和框架（如 React Spring, Vue Transition, Framer Motion 等），但有时候我们只需要在简单的 HTML 页面上实现一些酷炫的动画效果，而不想引入复杂的构建工具（如 Webpack, Vite）或框架。

这时，一个轻量级、功能强大的 JavaScript 动画库就显得非常有用。Anime.js 正是其中的佼佼者。而 Anime.js V4 版本更是拥抱了现代 JavaScript 的模块化特性，可以直接在支持 ES Modules 的浏览器中通过 CDN 使用 import 语法，无需任何构建步骤！

本文将通过一个具体的例子，带你了解如何在纯 HTML 文件中，使用 Anime.js V4 的 ES Module 版本实现一个漂亮的交错动画。

核心概念：ES Modules 和 CDN

在深入代码之前，需要理解两个关键点：

  1. ES Modules (ESM): 这是 JavaScript 语言本身的模块化标准。通过 import 和 export 关键字，我们可以在不同的 JavaScript 文件之间共享代码。现代浏览器原生支持 ES Modules，这意味着它们可以直接加载和运行使用 import 的 JavaScript 文件，只要该文件通过 <script type="module"> 标签引入。
  2. CDN (Content Delivery Network): 内容分发网络。通过 CDN，我们可以直接在网页中引用托管在远程服务器上的库文件，而无需将文件下载到本地项目。jsDelivr, unpkg 等都是常用的 CDN 服务商。

Anime.js V4 提供了 ES Module 版本，并且可以通过 CDN 访问。这使得在纯 HTML 文件中使用 import 成为可能。

示例代码解析

下面是实现交错动画的完整 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anime.js Stagger Animation (V4) - ESM CDN</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            overflow: hidden; /* Prevent potential scrollbars */
        }

        .container {
            display: flex; /* Arrange squares in a row */
        }

        .square {
            width: 50px;
            height: 50px;
            background-color: royalblue;
            margin: 0 10px; /* Space between squares */
            border-radius: 8px; /* Make them slightly rounded */
        }
    </style>
</head>
<body>

    <!-- 这些是我们将要动画的元素 -->
    <div class="container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>

    <!--
    通过 CDN 引入 Anime.js V4 的 ES Module 版本。
    type="module" 属性是使用 import/export 语法的关键。
    -->
    <script type="module">
        // 从 CDN 地址导入 Anime.js 的 animate 和 stagger 函数
        import { animate, stagger } from 'https://cdn.jsdelivr.net/npm/animejs@4.0.1/+esm';

        // 使用导入的函数定义动画
        animate('.square', {
            x: 320, // 目标属性：X轴向右移动 320 像素
            rotate: { from: -180 }, // 目标属性：旋转。从 -180 度开始旋转
            duration: 1250, // 动画持续时间 (毫秒)
            // 关键属性：交错延迟
            // stagger(65, { from: 'center' }) 表示每个元素的动画延迟相隔 65 毫秒
            // { from: 'center' } 指定交错的起点从中间元素开始，向两边扩散
            delay: stagger(65, { from: 'center' }),
            ease: 'inOutQuint', // 缓动函数，控制动画的速度曲线 (开始和结束慢，中间快)
            loop: true, // 动画是否循环播放
            alternate: true // 动画是否交替播放 (去程 -> 返程 -> 去程 ...)
        });
    </script>

</body>
</html>

让我们一步步解析这个代码：

  1. HTML 结构 (<body> 部分):

    • 我们创建了一个 .container 来包裹 .square 元素。
    • 里面有 7 个 <div class="square"></div> 元素，这些就是我们将要动画的对象。

  2. CSS 样式 (<style> 部分):

    • 基本的页面居中布局 (body, .container)。
    • 定义了 .square 元素的尺寸、背景颜色、圆角和间距，让它们看起来像一排蓝色方块。

  3. JavaScript 代码 (<script type="module"> 部分):

    • <script type="module">: 这个属性告诉浏览器这段脚本是一个 ES Module。这是使用 import 语法的前提。
    • import { animate, stagger } from 'https://cdn.jsdelivr.net/npm/animejs@4.0.1/+esm';: 这是魔术发生的地方！
      • import { animate, stagger } }：从 Anime.js 模块中导入 animate 和 stagger 这两个函数。
      • from '...': 指定了模块的来源。https://cdn.jsdelivr.net/npm/animejs@4.0.1/+esm 是 Anime.js v4.0.1 版本的 ES Module 在 jsDelivr CDN 上的地址。+esm 后缀是 jsDelivr 提供的一种便捷方式，用于直接获取指定库的 ES Module 文件。
    • animate('.square', { ... });: 这是 Anime.js 的核心函数。
      • 第一个参数 '.square' 是一个 CSS 选择器，告诉 Anime.js 对页面上所有匹配这个选择器的元素应用动画。
      • 第二个参数 { ... } 是一个对象，包含了动画的各种参数和属性。
        • x: 320: 定义了元素在水平方向（X 轴）上的位移，目标位置是原始位置向右移动 320 像素。
        • rotate: { from: -180 }: 定义了元素的旋转动画。{ from: -180 } 表示从 -180 度开始旋转到元素的原始旋转角度（通常是 0 度）。
        • duration: 1250: 单个元素的动画持续时间是 1250 毫秒（即 1.25 秒）。
        • delay: stagger(65, { from: 'center' }): 交错动画的关键。
          • stagger() 函数用于创建一系列递增的延迟值。
          • 65: 指定了每个元素之间的延迟间隔是 65 毫秒。
          • { from: 'center' }: 这是 stagger 函数的一个选项，它告诉 Anime.js 计算延迟时，以选择器匹配的元素的中间元素为起点，向两边扩散。例如，对于 7 个元素，中间第 4 个元素的延迟可能是 0，第 3 和第 5 个元素的延迟是 65ms，第 2 和第 6 个是 130ms，第 1 和第 7 个是 195ms。
        • ease: 'inOutQuint': 定义了动画的速度曲线。inOutQuint 是一种五次方缓动函数，使得动画开始和结束时较慢，中间过程较快，看起来更平滑。
        • loop: true: 设置为 true 时，动画会无限循环播放。
        • alternate: true: 设置为 true 时，动画会在播放完成后反向播放，然后再正向播放，如此往复。

如何运行代码

  1. 将上面的完整 HTML 代码复制。
  2. 打开一个纯文本编辑器（如记事本、VS Code、Sublime Text 等）。
  3. 粘贴代码，并保存为 .html 文件（例如 animejs_stagger.html）。
  4. 使用现代网页浏览器（如 Chrome, Firefox, Edge, Safari）直接打开这个 .html 文件。

重要提示： 由于使用了 type="module" 和 import，直接在浏览器中打开本地文件 (file:///...) 可能会受到浏览器安全策略的限制，导致模块加载失败（尽管通常会显示 404 错误，但原因可能是权限问题）。

推荐的运行方式：

使用一个简单的本地 Web 服务器来提供这个文件。最方便的方式是：

  • 如果你使用 VS Code，可以安装并使用 Live Server 扩展。
  • 在文件所在的文件夹打开命令行或终端，运行 Python 的简单 HTTP 服务器：
    • Python 3: python -m http.server
    • Python 2: python -m SimpleHTTPServer
      然后访问 http://localhost:端口号/你的文件名.html。

通过本地服务器访问，可以模拟真实的 Web 环境，避免潜在的加载问题。

总结

通过这个例子，我们看到了如何利用 Anime.js V4 的 ES Module 版本和 CDN，在没有任何构建工具的情况下，仅凭一个 HTML 文件就能实现复杂的交错动画效果。

这种方法非常适合：

  • 快速原型开发和实验。
  • 为静态 HTML 页面添加动画。
  • 在教程或演示中展示动画效果，而无需读者搭建复杂的开发环境。

Anime.js 功能远不止于此，它还支持 SVG、DOM 属性、Timeline 等更高级的动画控制。你可以尝试修改代码中的参数（如 x, duration, delay 的值，stagger 的 from 选项改为 'left', 'right', 'start', 'end'，或者更换 ease 类型），来创建不同的动画效果，进一步探索 Anime.js 的强大之处！