SuperAPI AI 工具集

gsap-svg

编程与开发

查看项目

更新于 10-15 22:38

技能介绍

用途:该技能提供 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),而非相对偏移。其余内容暂未提供。