SuperAPI AI 工具集

gsap-svg

设计与创作

查看项目

更新于 10-16 00:30

技能介绍

用途:在 GSAP 中实现 SVG 动画,涵盖描边绘制、路径变形、沿路径运动三类效果。

主要能力:DrawSVGPlugin 控制描边绘制进度(如 drawSVG: '0% 100%'),支持起始段、中段、反向绘制与多路径 stagger;MorphSVGPlugin 让一个形状变形为另一个形状,支持 shapeIndex、auto 自动匹配、rotational 旋转匹配、smooth 平滑过渡,并可用 convertToPath 把 circle 等基础图形转为路径;MotionPathPlugin 让元素沿路径运动,支持路径选择器、路径字符串、坐标数组、autoRotate 自动旋转、start/end 区间、offsetX/offsetY 偏移。三者可与 ScrollTrigger 结合实现滚动驱动动画,也可用 timeline 编排组合序列。

使用方式:npm install gsap;从 gsap/DrawSVGPlugin 等路径导入插件并 gsap.registerPlugin 注册后调用。原为会员专属的三个插件现已包含。

限制与注意事项:DrawSVG 需要元素有 stroke 且 fill: none,仅适用于 SVG 元素;Morph 需调试 shapeIndex 以获得理想效果;autoRotate 需正确设置 transformOrigin;路径点过多影响性能,应简化路径;不同浏览器 SVG 渲染可能存在差异,需实测。