技能介绍

要解决的问题

在 Web 页面中，SVG 常用于图标、插图或轻量图形，但原生 SMIL 或 CSS 动画在复杂序列、路径变形和滚动联动上容易变得难以维护。手工写 animate、animateTransform 或零散 CSS 关键帧，常常导致时间轴错位、路径插值不自然，且难以复用。

技能如何工作

该技能面向 SVG 动画的构建过程，核心基于 GSAP 与 SVG DOM API，把动画拆成可编排的时间轴。它主要覆盖三类能力：

时间轴动画：通过 GSAP timeline 组织属性变化、变换和显隐，便于对齐多个元素。
路径变形：利用 flubber 处理路径之间的插值，适合图标状态切换、logo 变形等场景。
滚动触发序列：借助 ScrollTrigger，把动画与页面滚动位置关联，实现进入视口后逐步播放。

使用流程上，先确定 SVG 结构、目标属性和动画阶段；再创建时间轴并插入补间或变形；最后将时间轴绑定到滚动或播放控制上。技能文档中给出了从 upstream GSAP 文档提取的入门指引，便于按官方 API 继续调整。

适用边界与注意点

它不负责生成静态 SVG 资产，也不解决复杂的 3D 或物理模拟。路径变形需要源路径与目标路径在节点、方向和命令上尽量匹配，否则可能出现不自然的过渡。滚动触发依赖页面滚动上下文，在嵌入 iframe、锚点导航或移动端橡皮筋滚动场景中需要单独验证。动画应避免同时驱动过多 DOM 节点，否则可能造成主线程压力。若只需要简单悬停或无限循环，原生 CSS 可能更轻。