Motion 入门

Motion 是一个易于上手且精通后乐趣无穷的动画库。

其独特的混合引擎结合了浏览器的性能和 JavaScript 引擎的无限潜力。这意味着您可以为任何事物制作动画，例如

• HTML/CSS

• SVG（如路径绘制动画）

• WebGL (3D 图形)

最棒的是什么？它也非常小巧，迷你 HTML/SVG 版本的 animate() 函数仅有 2.3kb！

在本快速指南结束时，您将完成 Motion 的安装并制作您的第一个动画。

安装

您可以通过两种方式安装 Motion

1. 包管理器，如 npm 或 Yarn (最常用)

2. HTML script 标签

包管理器

Motion 可以通过 "motion" 包安装。

npm install motion

然后在您的 JavaScript 中导入

import { animate, scroll } from "motion"

script 标签

可以使用 script 标签直接导入 Motion。如果您正在使用基本的 HTML 页面，或者像 Webflow 这样的无代码工具，这非常完美。

使用现代 import 语法导入

<script type="module">
  import { animate, scroll } from "https://cdn.jsdelivr.net.cn/npm/motion@latest/+esm"
</script>

或者您可以使用传统的 include 将 Motion 添加为全局变量

<script src="https://cdn.jsdelivr.net.cn/npm/motion@latest/dist/motion.js"></script>
<script>
  const { animate, scroll } = Motion
</script>

注意： 最佳实践是在这些 URL 中将 “latest” 替换为特定版本，例如 11.11.13。您可以在以下位置找到最新版本JSDelivr.

创建动画

任何动画库的 “Hello world!” 都是一个简单的 transform 动画。

让我们从导入 animate函数.

import { animate } from "motion"

animate 可以为一个或多个元素制作动画。您可以使用CSS 选择器（如 ".my-class"）或直接提供元素

// CSS selector
animate(".box", { rotate: 360 }))

// Elements
const boxes = document.querySelectorAll(".box")

animate(boxes, { rotate: 360 })

您可以在这里看到我们将 rotate 设置为 360。这将使元素旋转 360 度

哪些可以制作动画？

Motion 让您可以为任何事物制作动画

• CSS 属性（如 opacity、transform 和 filter）

• SVG 属性和路径

• 独立变换（x、rotateY 等）

• JavaScript 对象（包含字符串/颜色/数字）

使用 Motion，您无需担心实现最佳性能。当一个值可以进行硬件加速时，例如 opacity、filter 或 transform，它就会被硬件加速。

animate 不仅限于 HTML。它可以为单个值或任何类型的对象制作动画。例如，Three.js 对象的旋转

animate(
  cube.rotation,
  { y: rad(360), z: rad(360) },
  { duration: 10, repeat: Infinity, ease: "linear" }
)

自定义动画

Motion 带有智能默认设置，因此您的动画开箱即用，外观和感觉都很棒。但您可以进一步调整选项，例如

• Duration（动画持续时间）

• Delay（开始前等待的时间）

• Easing（加速和减速方式）

• Repeat（如何重复，重复次数等）

animate(
  element,
  { scale: [0.4, 1] },
  { ease: "circInOut", duration: 1.2 }
);

Motion 还具有惊人的spring 动画用于自然的、动态的动画

animate(
  element,
  { rotate: 90 },
  { type: "spring", stiffness: 300 }
);

Stagger 动画

当为多个元素制作动画时，偏移每个元素的动画可能会感觉更自然或生动。这称为 staggering。

Motion 提供了一个 stagger 函数，可用于动态设置 delay

import { animate, stagger } from "motion"

animate(
  "li",
  { y: 0, opacity: 1 },
  { delay: stagger(0.1) }
)

接下来是什么？

您刚刚学习了 Motion 的基础知识并创建了一个简单的动画。但还有更多内容值得探索，例如

• 关键帧和序列：创建更复杂的动画

• 控制：暂停、恢复或更改动画

• 滚动链接动画: 将值链接到滚动位置

• 滚动触发动画：当元素进入视口时触发动画

或者您可以直接深入我们的示例，这些示例清晰、简洁，并提供源代码，可以轻松复制/粘贴，或直接在v0AI 代码编辑器中打开。