用途:该技能提供 GSAP 制作 SVG 动画的可复用配方,是 gsap-plugins(API 参考)的配套技能,只覆盖动画配方本身。流程位置为 gsap-setup → gsap-animate → gsap-svg → gsap-optimise → gsap-test,需配合 greensock/gsap-skills 使用。
主要能力:一是路径描边绘制,可用原生 strokeDashoffset 方式(getTotalLength 配合 strokeDasharray、strokeDashoffset 归零,可 stagger),或懒加载 DrawSVG 插件后用 drawSVG: '0%',并支持 drawSVG: '40% 80%' 局部区间;可做描边后接节点的分段时间线,以及无限脉冲环。二是 SVG 变形,可直接动画 attr.d,或结合 ScrollTrigger 做滚动驱动,也可懒加载 MorphSVGPlugin 使用 morphSVG。三是扇形波浪、形状叠加等效果。
使用方式:在 gsap.context 中查询 DOM 并批量设置,配合时间线与 stagger;插件采用 $lazyLoadDrawSVG / $lazyLoadMorphSVG 懒加载;卸载时调用 ctx.revert() 并清空 SVG DOM。
限制与注意:fill 需用 transparent,不能用 none,否则无法插值;并发时间线必须各自拥有不同属性(如波浪管 stroke、颜色管 fill 与 autoAlpha);多层组合应使用绝对时间定位 .add(animation, timeInSeconds),而非相对偏移。其余内容暂未提供。