从入门到精通：Anime.js Random 函数完全指南

原创于 2025-07-09 14:07:31 发布 · 521 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #运维

anime.js入门教程专栏收录该内容

55 篇文章

订阅专栏

第一章：随机性的魔力：为网页动画注入生命

在网页动画的世界里，精准与可预测性是基础。一个按钮从 A 点移动到 B 点，一个菜单以 400 毫秒的速度淡入。这些都是精确的、可重复的动作。然而，最令人着迷、最感觉“鲜活”的动画，往往都带有一丝不可预测的“混乱”——这就是随机性的力量。想象一下，僵硬、整齐划一的粒子效果，与随风飘散、形态各异的雪花相比，后者无疑更能吸引用户的目光。随机性打破了机械的重复，创造出有机的、动态的、充满惊喜的视觉体验。

Anime.js，作为一个轻量级且功能强大的 JavaScript 动画库，深刻理解这一点。它的设计哲学远不止于简单的属性渐变。在其丰富的“动画师工具箱”中 1，提供了一系列实用的辅助函数（Utilities），旨在简化那些能创造出高级效果的常见动画模式 2。其中，

random() 函数就是一把开启有机动画大门的关键钥匙。Anime.js 将随机性提升为一等公民，这本身就是一种设计宣言：它不仅仅是一个工具，更是一种鼓励开发者去创造生成式、非均匀、更自然动态效果的创作伙伴。

本指南将带领前端初学者，踏上一段从入门到精通的旅程。我们将从 anime.random() 的最基本用法开始，深入剖析其在处理多元素集合时的核心机制，解决在循环动画中遇到的常见陷阱，并最终通过一个引人入胜的实战项目——“交互式五彩纸屑礼炮”，将所有知识融会贯通，让读者真正掌握为网页注入生命与活力的秘诀。

第二章：核心机制：深入剖析 `anime.random()`

要掌握随机动画，首先必须理解其最基本的构建块：anime.random() 函数。这个函数是 Anime.js 工具集的核心部分，提供了一种比原生 Math.random() 更便捷、更符合动画场景需求的方式来生成随机数。

`anime.random()` 的剖析

根据官方文档，anime.random() 函数的作用是在一个指定的范围内返回一个随机数 3。它的函数签名非常直观：

anime.random(min, max, decimalLength)

这个函数在 Anime.js 的较新版本中，可以通过 anime.random() 或 anime.utils.random() 来访问，但在绝大多数情况下，直接使用 anime.random() 即可。

表 1: anime.random() API 参考

参数	类型	描述	示例
`min`	Number	随机范围的下限（包含自身）。	`anime.random(10, 50)`
`max`	Number	随机范围的上限（包含自身）。	`anime.random(10, 50)`
`decimalLength` (可选)	Number	结果保留的小数位数。默认为 0，即返回整数。	`anime.random(0, 1, 2)`

生成整数

在动画中，最常见的需求是生成随机整数，用于像角度、像素位移等属性。

例如，要让一个元素随机旋转 0 到 360 度之间的一个角度：

JavaScript

anime({
  targets: '.square',
  rotate: anime.random(0, 360) // 生成一个 0 到 360 之间的随机整数
});

或者让它在 X 轴上随机平移 -100 到 100 像素之间的一个距离：

JavaScript

anime({
  targets: '.square',
  translateX: anime.random(-100, 100) // 生成一个 -100 到 100 之间的随机整数
});

生成小数

对于需要更高精度的属性，如 opacity（不透明度）或 scale（缩放），decimalLength 参数就派上了用场。通过指定第三个参数，可以轻松获得随机的浮点数。

例如，让一个元素的最终不透明度在 0.5 到 1 之间，且结果保留两位小数：

JavaScript

anime({
  targets: '.square',
  opacity: anime.random(0.5, 1, 2) // 可能生成 0.72, 0.89 等
});

同样，可以实现一个随机的缩放效果，结果保留一位小数：

JavaScript

anime({
  targets: '.square',
  scale: anime.random(0.8, 1.5, 1) // 可能生成 1.2, 0.9 等
});

一个重要的提醒：执行时机

在使用上述方法时，一个至关重要的细节需要注意。当像 rotate: anime.random(0, 360) 这样直接将函数调用的结果作为属性值时，anime.random() 会立即执行，生成一个单一的随机数。如果动画的目标（targets）是多个元素，那么所有元素都会使用这同一个随机值进行动画。

JavaScript

// 错误示范：所有.square 元素都会移动到同一个随机位置
anime({
  targets: '.square',
  translateX: anime.random(0, 100)
});

这通常不是我们想要的效果。如何让每个元素都拥有自己独特的随机值？这正是下一章节将要解决的核心问题。

第三章：驱动集合：函数式值的力量

在前端动画开发中，一个常见的场景是同时操作一组元素，并赋予它们各自不同的动画效果，以形成丰富、有层次的视觉体验。上一章末尾提出的问题——所有元素都获得相同的随机值——是初学者在使用 anime.js 时最容易遇到的困惑之一 4。要解决这个问题，就必须理解并掌握

anime.js 中一个极其强大的概念：函数式值 (Function-based values)。

问题所在：一次性求值

让我们再次审视这个有问题的代码：

translateX: anime.random(0, 100)

当 anime() 函数被调用时，JavaScript 引擎会首先对传递给它的对象进行求值。anime.random(0, 100) 这部分会立即执行，返回一个数字，比如 42。因此，anime.js 实际收到的动画参数是 translateX: 42。随后，它会将这个固定的值应用到所有匹配 .square 选择器的目标元素上。这就是为什么所有方块都移动到同一个位置的原因。

解决方案：“为每个目标执行一次”

anime.js 的设计者预见到了这个问题，并提供了一个优雅的解决方案。当某个动画属性的值是一个函数时，anime.js 的行为会发生根本性的改变：它不会立即执行这个函数，而是会在遍历每一个目标元素时，为该元素单独执行一次这个函数，并将函数的返回值作为该元素此属性的动画值。

这揭示了 anime.js 属性系统的一个核心设计原则：当使用函数作为值时，其求值过程是“懒惰的”或“即时的”（just-in-time）。它将最终值的计算推迟到应用到特定元素的最后一刻。正是这个机制，赋予了 anime.js 强大的逐元素定制能力，也是实现随机化和交错（staggering）等高级效果的基石 5。

正确的语法如下：

JavaScript

anime({
  targets: '.square',
  // 使用箭头函数，让 anime.js 为每个元素调用一次 random 函数
  translateX: () => anime.random(-100, 100),
  rotate: () => anime.random(-45, 45)
});

在这个例子中，translateX 的值是一个函数 () => anime.random(-100, 100)。当 anime.js 处理第一个 .square元素时，它调用这个函数，得到一个随机值（如 58）；当处理第二个 .square 元素时，它再次调用这个函数，得到另一个全新的随机值（如 -23）。以此类推，每个元素都获得了自己独特的动画参数。

函数式值还可以接收两个非常有用的参数：el（当前目标元素）和 i（当前目标元素的索引）。这让我们可以基于元素本身或其在集合中的位置来创建更复杂的逻辑。

JavaScript

anime({
  targets: '.dot',
  delay: (el, i) => i * 50 // 根据索引创建交错延迟效果
});

视觉对比

为了更直观地理解两者的差异，可以想象以下两个场景：

静态随机值：一排士兵接到命令“向前随机走 5 步！”。指挥官在下令前掷了一次骰子，结果是 5。于是所有士兵都整齐地向前走了 5 步。
函数式随机值：一排士兵接到命令“每个人自己掷骰子决定走几步！”。每个士兵都独立掷骰子，得到不同的步数，最终形成了一个错落有致、看起来更自然的队列。

这种为每个目标元素独立计算动画值的强大能力，是 anime.js 实现复杂、有机动画的基础。掌握了函数式值，就等于掌握了 anime.js 随机动画的精髓。

第四章：扩展调色板：`randomPick()` 与色彩魔法

虽然 anime.random() 在生成数值范围内的随机数方面非常出色，但在某些场景下，我们的需求并非在一个连续的区间内取值，而是从一个预设的、离散的集合中随机挑选一项。例如，从一组特定的颜色、时长或者动画缓动函数中进行选择。为此，Anime.js 提供了另一个便捷的工具函数：anime.randomPick() 7。

`anime.randomPick()` 简介

anime.randomPick() 的作用是从一个给定的集合（数组、NodeList 或字符串）中随机返回一个元素。这使得从预定义的选项列表中进行选择变得异常简单 7。

表 2: anime.randomPick() API 参考

参数	类型	描述
`collection`	Array \| NodeList \| String	从中随机挑选一个元素的数据集合。

使用示例

结合上一章学到的函数式值，randomPick() 的威力得以完全释放。

从颜色列表中随机挑选：

JavaScript

anime({
  targets: '.circle',
  // 为每个圆圈从给定的颜色数组中随机选择一个背景色
  backgroundColor: () => anime.randomPick()
});

从时长列表中随机挑选：

JavaScript

anime({
  targets: '.item',
  // 为每个元素设置一个随机的动画时长
  duration: () => anime.randomPick()
});

从字符串中随机挑选一个字符：

官方文档甚至展示了一个有趣用法，可以从一个字符串中随机挑选单个字符 7。
JavaScript
```
anime({
  targets: '.letter',
  innerHTML: () => anime.randomPick('ABCDE')
});
```

创造真正的随机颜色

从预设列表中挑选颜色固然方便，但有时我们希望创造出完全随机、不可预知的颜色，以实现更丰富的视觉效果，比如生成艺术或粒子系统。

直接生成随机的 RGB 值（如 rgb(随机, 随机, 随机)）是一种方法，但其结果往往在视觉上不那么和谐，容易产生刺眼或浑浊的颜色。一种更受设计师和动画师青睐的方法是使用 HSL (Hue, Saturation, Lightness) 色彩空间。通过固定饱和度（Saturation）和亮度（Lightness）在一个理想的范围内，仅随机化色相（Hue），可以生成一系列明亮、鲜艳且视觉上相互协调的颜色。

Anime.js 能够完美解析并动画 HSL 格式的颜色字符串 8。我们可以结合

anime.random() 和 JavaScript 的模板字符串，轻松地创建一个随机颜色生成函数。

JavaScript

// 创建一个函数，用于生成一个视觉上令人愉悦的随机 HSL 颜色
const getRandomColor = () => {
  // 色相(Hue)在 0-360 度之间随机
  const hue = anime.random(0, 360);
  // 饱和度(Saturation)保持在较高范围，如 70%-90%，保证颜色鲜艳
  const saturation = anime.random(70, 90);
  // 亮度(Lightness)保持在适中范围，如 50%-70%，避免过暗或过曝
  const lightness = anime.random(50, 70);
  
  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
};

// 在动画中使用这个函数
anime({
  targets: '.shape',
  // 为每个图形应用一个全新的、随机生成的鲜艳颜色
  backgroundColor: () => getRandomColor(),
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

通过这种方式，我们不仅学会了如何使用 randomPick()，还掌握了如何结合 random() 与色彩理论，创造出更专业、更具美感的随机颜色动画。

第五章：循环动画的难题：一个关键陷阱的解决方案

掌握了函数式值后，开发者可能会尝试将其与循环动画结合，期望在每次循环时都能看到全新的随机效果。然而，他们很快会发现一个令人困惑的现象：随机值只在第一次循环时生成，后续的所有循环都只是在重复第一次的效果。这是一个非常普遍的陷阱，其根源在于对 anime.js 动画实例生命周期的误解。

问题诊断

让我们来看一个典型的例子：

JavaScript

anime({
  targets: '.square',
  translateX: () => anime.random(-100, 100),
  duration: 1000,
  loop: true // 启用无限循环
});

直观上，我们期望方块在每次来回运动时，其终点位置都是一个新的随机值。但实际情况是，方块只会在第一次运动到一个随机位置（比如 87px），然后就永远在这个位置和初始位置之间循环往复。

根源剖析

这个问题的根本原因在之前的章节中已经有所暗示。当 anime() 函数被调用时，它会创建一个动画实例（animation instance）。在这个创建过程中，它会遍历所有目标元素，并为每个元素执行一次函数式值（如 () => anime.random(-100, 100)），从而计算出每个元素在此次动画实例中需要的所有属性值。这些计算出的值（比如第一个方块的 translateX 是 87px，第二个是 -34px 等）会被“烘焙”到这个动画实例中。

loop: true 参数的作用，仅仅是让这个已经配置好、所有值都已固定的动画实例在播放结束后，将时间线重置到开头并重新播放。它并不会触发重新计算动画参数的过程。用户的期望是“每次循环都重新执行逻辑”，而库的实现为了性能考虑是“重复播放已计算好的结果”。这种期望与实现之间的偏差，正是导致困惑的来源 10。

“推倒重来”的解决方案

要实现每次循环都重新随机化，我们需要一种方法来强制 anime.js 在每次循环开始时都创建一个全新的动画实例。社区中探索出的最优雅、最可靠的解决方案是：将动画定义包裹在一个函数中，并在动画完成的回调（complete callback）中再次调用自身 10。

JavaScript

function playAnimation() {
  anime({
    targets: '.square',
    translateX: () => anime.random(-100, 100),
    backgroundColor: () => `hsl(${anime.random(0, 360)}, 70%, 60%)`,
    duration: 1000,
    easing: 'easeInOutSine',
    // 关键：在动画完成时，再次调用 playAnimation 函数
    complete: playAnimation 
  });
}

// 首次启动动画
playAnimation();

方案分析

这个模式之所以有效，是因为它完全改变了动画的生命周期管理方式。我们不再依赖 anime.js 内置的 loop 机制，而是通过递归调用来手动创建循环。

首次调用 playAnimation()，一个新的 anime 实例被创建。所有随机值被计算并“烘焙”进去。
这个实例播放一次。
当动画播放完成时，complete 回调被触发。
complete 回调中执行了 playAnimation()，这会从头开始创建一个全新的 anime 实例。在这个新实例的创建过程中，所有的函数式值（包括 anime.random()）都会被重新执行，从而生成一套全新的随机值。
这个新实例播放一次，完成后又会触发 complete 回调，周而复始。

这种方法将开发者的心智模型（每次循环都应是全新的）与代码的实际行为统一起来。它教会我们一个更高级的概念：对于高度动态、需要持续生成新状态的动画，我们应该主动地管理动画实例的创建与销毁，而不是仅仅依赖内置的循环参数。掌握了这种“推倒重来”的模式，就意味着从 anime.js 的使用者，向着能够驾驭其核心机制的专家迈进了一大步。

第六章：实战大师：构建交互式五彩纸屑礼炮

理论知识的最终目的是应用于实践。现在，我们将综合运用前面所有章节学到的知识——random()、函数式值、随机颜色、以及循环问题的解决方案——来构建一个有趣、生动且极具成就感的项目：一个交互式的五彩纸屑礼炮。当用户点击一个按钮时，一簇色彩斑斓、形态各异的纸屑会从按钮处“爆炸”出来，然后缓缓飘落并消失。

这个项目将完美地展示，看似复杂的动画效果，实际上是如何通过将简单的、随机化的规则应用到大量动态生成的元素上而涌现出来的。

项目准备

首先，我们需要简单的 HTML 和 CSS 结构。

HTML:

HTML

<div class="container">
  <button class="confetti-button">Click Me!</button>
</div>

CSS:

CSS

body {
  background-color: #1a1a1a;
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  position: relative;
}

.confetti-button {
  padding: 1rem 2rem;
  font-size: 1.5rem;
  background-color: #4B9EFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  opacity: 0; /* 初始不可见 */
}

第一步：点击触发

我们的所有逻辑都将从按钮的点击事件开始。这天然地契合了上一章学到的“推倒重来”模式：每次点击都将生成一次全新的、独一无二的纸屑爆炸效果。

JavaScript

const confettiButton = document.querySelector('.confetti-button');
const container = document.querySelector('.container');

confettiButton.addEventListener('click', () => {
  // 所有的动画逻辑都将写在这里
});

第二步：动态创建纸屑

在点击事件的回调函数内部，我们需要动态地创建一系列 <div> 元素作为纸屑。我们用一个循环来完成这个任务，每次点击生成 50 个纸屑。

JavaScript

confettiButton.addEventListener('click', () => {
  const confettiCount = 50;
  const pieces =;

  for (let i = 0; i < confettiCount; i++) {
    const piece = document.createElement('div');
    piece.classList.add('confetti-piece');
    container.appendChild(piece);
    pieces.push(piece);
  }
  //...接下来的动画代码
});

这种动态创建 DOM 元素用于粒子效果的模式，在许多动画示例中都很常见 11。

第三步：核心动画逻辑

这是我们将所有 random 知识融会贯通的地方。我们创建一个 anime() 调用，目标是刚刚创建的 pieces 数组。

JavaScript

//...接在 for 循环之后
anime({
  targets: pieces,
  // 1. 初始位置：所有纸屑从按钮中心开始
  left: `${confettiButton.offsetLeft + confettiButton.offsetWidth / 2}px`,
  top: `${confettiButton.offsetTop + confettiButton.offsetHeight / 2}px`,
  
  // 2. 运动轨迹：模拟爆炸和重力
  translateX: () => anime.random(-150, 150),
  translateY: () => anime.random(-100, 150), // Y轴有正有负，模拟向上喷射再下落
  
  // 3. 旋转：每个纸屑都有独特的旋转
  rotate: () => anime.random(0, 360),
  
  // 4. 缩放和不透明度：模拟纸屑飘远并消失
  scale: [
    { value: () => anime.random(0.5, 1.2), duration: 200 }, // 初始放大
    { value: 0, duration: 800, delay: 300 } // 延迟后缩小至消失
  ],
  opacity: [
    { value: 1, duration: 100 }, // 快速淡入
    { value: 0, duration: 900, delay: 200 } // 延迟后淡出
  ],
  
  // 5. 颜色：使用随机 HSL 颜色
  backgroundColor: () => `hsl(${anime.random(0, 360)}, 90%, 65%)`,
  
  // 6. 延迟：使用 stagger 创造层次感
  delay: anime.stagger(10), // 每个纸屑的动画依次延迟 10ms 开始 [5]
  
  duration: 1200,
  easing: 'easeOutExpo',
  
  //...接下来的清理代码
});

在这个动画中，我们几乎用到了所有技巧：

translateX / translateY / rotate: 使用 anime.random() 为每个纸屑赋予独一无二的运动轨迹和旋转。translateY 的范围模拟了重力效果，这是许多纸屑教程中提到的技巧 12。
backgroundColor: 使用随机 HSL 颜色函数。
scale / opacity: 使用关键帧（Keyframes）来控制纸屑出现和消失的复杂效果。
delay: 引入了 anime.stagger()，这是 random 的绝佳搭档。它让爆炸不是瞬间同时发生，而是有细微的时间差，大大增强了动画的自然感和层次感。

第四步：动画后清理

动画结束后，这些动态创建的 <div> 元素还残留在 DOM 中。为了保持页面干净，防止内存泄漏，我们需要在动画完成时将它们移除。anime.js 的 complete 回调是执行此操作的完美时机。

JavaScript

//...接在 easing 之后
complete: (anim) => {
  anim.animatables.forEach((animatable) => {
    animatable.target.remove();
  });
}

最终成品

将以上所有步骤整合，我们就完成了一个功能完备、效果炫酷的交互式五彩纸屑礼炮。每次点击，都会上演一场独一无二的视觉盛宴。这个项目清晰地揭示了一个核心的动画设计思想：宏观的复杂性源于微观的随机性。我们没有为每个粒子手写复杂的运动路径，而是定义了一套简单的、带有随机参数的规则，然后将其应用到大量粒子上，最终涌现出了生动、复杂的整体效果。

第七章：总结与未来探索

通过本次从入门到精通的旅程，我们系统地学习了 anime.js 中与随机性相关的核心功能，并掌握了将其应用于实际项目中的关键技巧。

核心知识回顾

基础 API: 我们熟悉了 anime.random(min, max, decimalLength) 和 anime.randomPick(collection) 的语法和用途，它们是实现随机动画的基石。
函数式值: 我们理解了 anime.js 中最关键的概念之一——当属性值为函数时，会为每个目标元素独立执行。这是实现多元素差异化动画的核心。
循环陷阱与对策: 我们诊断并解决了在循环动画中随机值不变的普遍问题，并掌握了通过 complete 回调递归调用来创建全新动画实例的“推倒重来”模式。
组合的力量: 在最终的纸屑礼炮项目中，我们见证了将 random 与 stagger、动态 DOM 创建、颜色生成函数以及动画生命周期管理相结合所产生的巨大威力。

开启生成式思维

更重要的是，这次学习超越了单纯的 API 使用。我们建立了一种“生成式”的动画思维模式。我们不再将动画视为一系列预先设定好的、僵硬的指令，而是学会了如何定义一套规则，并引入受控的随机性，让系统为我们“生成”出丰富、有机、每次都不同的视觉结果。这扇门背后，是粒子系统、程序化艺术、数据可视化等更广阔、更激动人心的领域。

未来探索之路

anime.js 的世界远比我们本次探索的要广阔。掌握了 random 之后，可以向以下方向继续深入：

高级 Staggering: 深入研究 anime.stagger() 的高级参数，如 grid 和 axis，将随机值与网格布局结合，创造出令人惊叹的矩阵动画效果 5。
SVG 动画: 尝试使用 random() 来动画化 SVG 的路径数据（d 属性）或属性，实现图形的随机变形或线条的随机绘制 14。
结合 Modifier: 探索 stagger() 或动画属性中的 modifier 函数，它允许在最终应用值之前对其进行最后一次修改，可以与 random() 结合，创造出更复杂的数值关系 15。
物理与缓动: 将随机性与 anime.js 强大的缓动函数（Easings），尤其是弹簧物理（Spring Physics）结合，模拟出更真实的物理效果。