SVG 动画

相关源文件

• examples/assets/css/styles.css
• lib/anime.cjs
• lib/anime.esm.js
• lib/anime.esm.min.js
• lib/anime.iife.js
• lib/anime.iife.min.js
• lib/anime.min.cjs
• lib/anime.umd.js
• lib/anime.umd.min.js
• package.json
• types/index.js

此页面介绍如何使用 anime.js 动画 SVG 元素。SVG（可缩放矢量图形）是一种创建独立于分辨率的图形的强大格式，而 anime.js 提供了专门的工具来动画 SVG 元素、属性、路径和描边。有关通用动画信息，请参阅基本用法；有关 JavaScript 对象动画技术，请参阅JavaScript 对象动画。

anime.js 中的 SVG 动画概述

Anime.js 提供了几种专门的 SVG 动画工具

1. SVG 属性动画：动画化任何 SVG 属性，例如 fill、stroke、stroke-width 等。
2. 路径变形：将一个 SVG 路径形状平滑地转换为另一个形状
3. SVG 绘制：精确控制 SVG 路径的绘制动画
4. 运动路径动画：沿 SVG 路径动画化元素

该库提供了一个专用的 svg 对象，其中包含实用函数，可帮助实现复杂的 SVG 动画。

来源： lib/anime.esm.js349 lib/anime.esm.js1576-1616

SVG 目标检测

Anime.js 在提供 SVG 元素作为动画目标时会自动检测它们。检测过程结合使用符号和类型检查来识别和正确处理 SVG 元素。

该库使用 isSvgSymbol 来标记 SVG 元素并跟踪其状态。当 SVG 元素注册为目标时，其属性和特性将与常规 DOM 元素不同地进行处理。

来源： lib/anime.esm.js348 lib/anime.esm.js496

SVG 属性动画

Anime.js 可以动画化大多数 SVG 属性，包括

• fill 和 stroke（颜色）
• stroke-width 和 stroke-dasharray（描边属性）
• r、cx、cy（圆形属性）
• x、y、width、height（位置和大小）
• d（路径数据）
• 以及更多

该库根据目标元素类型和属性名称，确定属性是作为属性还是 CSS 属性进行动画化。

对于 SVG 特定的属性，anime.js 使用 setAttribute 方法，而不是 style 属性。

来源： lib/anime.esm.js954-956 types/index.js590-592

使用 morphTo 进行路径变形

morphTo 函数支持 SVG 路径之间的平滑变形。这对于创建形状变化动画特别有用。

该函数的工作方式是

1. 将目标路径作为参数
2. 对源路径和目标路径上的点进行采样
3. 创建对应点对
4. 返回动画的起始和结束路径数据数组

SVG 路径变形可用于 <path> 元素和具有 points 属性的元素，例如 <polygon> 和 <polyline>。

来源： lib/anime.esm.js1582-1607 lib/anime.umd.js1582-1607

使用示例

使用 createDrawable 进行 SVG 绘制动画

createDrawable 函数提供了一种强大的方式来创建线条绘制动画。它通过操作 stroke-dashoffset 和 stroke-dasharray 属性来控制路径的可见度。

该函数创建了一个围绕 SVG 元素的代理对象，该对象公开了一个特殊的 draw 属性，该属性可以从 0 动画到 1 来控制绘制进度。

来源： lib/anime.esm.js1608-1630 lib/anime.umd.js1608-1630

使用示例

使用 createMotionPath 进行运动路径动画

createMotionPath 函数允许元素沿 SVG 路径进行动画。这对于创建难以通过标准关键帧描述的复杂运动模式很有用。

该函数返回一个对象，其中包含 translateX、translateY 和 rotate 属性，这些属性可用于动画。每个属性都是一个函数，在沿路径的给定位置返回相应的值。

来源： lib/anime.esm.js1631-1638 lib/anime.umd.js1631-1638

使用示例

实现细节

SVG 检测

Anime.js 使用 isSvg 函数检测 SVG 元素

当元素注册为目标时，它会被标记为带有多个符号

这些符号有助于库跟踪和管理 SVG 特定的状态和行为。

来源： lib/anime.esm.js347-349 types/index.js47-51

SVG 属性处理

对于 SVG 元素，anime.js 使用 isValidSVGAttribute 函数来确定属性是作为属性还是 CSS 属性进行动画化。

这使得该库能够正确地将 fill、stroke 和 d 等属性作为 SVG 属性正确处理。

来源： lib/anime.esm.js1576-1583 lib/anime.umd.js1576-1583

高级 SVG 动画技术

组合多种 SVG 动画

您可以组合多种 SVG 动画技术来实现复杂的效果

这种方法允许通过不同动画类型之间的精确计时和协调来创建复杂的 SVG 动画。

来源： lib/anime.esm.js1576-1638

性能考量

SVG 动画，特别是路径变形和绘制，对于复杂的路径来说可能非常耗费性能。以下是一些优化 SVG 动画的技巧

1. 简化路径：如果可能，请在 SVG 路径中使用更少的点。
2. 调整精度：morphTo 函数接受一个精度参数，该参数控制采样点的数量。
3. 使用 requestAnimationFrame：Anime.js 在内部使用 requestAnimationFrame 来实现平滑动画。
4. 批量动画：将相似的动画分组以减少开销。
5. 考虑使用 transform 属性：在可能的情况下，使用 transforms 而不是更改 SVG 属性。

来源： lib/anime.esm.js1582-1607

浏览器兼容性

SVG 动画功能在现代浏览器中得到了很好的支持。该库为不同环境提供了回退和兼容性检查。

Anime.js 使用此代码检测浏览器环境和 SVG 支持

这确保了 SVG 特定功能仅在支持时才使用。

来源： lib/anime.esm.js300-301 lib/anime.esm.js496

总结

Anime.js 提供强大的 SVG 动画工具，通过

1. 直接属性动画：动画化标准 SVG 属性
2. 路径变形：使用 morphTo 将一个路径转换为另一个路径
3. 绘制动画：使用 createDrawable 创建路径绘制效果
4. 运动路径：使用 createMotionPath 沿路径移动元素

这些功能使得在保持库的简单、声明式语法的同时，能够创建复杂、引人入胜的 SVG 动画。