Plugin

MorphSVG：形狀變形

兩個 path 之間 morph；可調 type rotational 與 shapeIndex 避免扭曲。

導讀

不需相同點數也能 morph。若中途打結，試 shapeIndex 或 type: "rotational"。

看什麼
圖示 A ↔ B 平滑變形，而非淡入淡出。
怎麼試
在兩種 shape 間切換，對比 linear / rotational。
Skill 對應：MorphSVGPlugin, morphSVG, shapeIndex, type rotational
  • 起迄 path 不必相同點數；MorphSVG 會轉成 cubic bezier
  • 中途打結：試 type: "rotational" 或調 shapeIndex
  • circle/rect 可先 MorphSVGPlugin.convertToPath()
  • morphSVG 可給 selector、元素或 raw path 字串
gsap.to("#shape", {
  duration: 1,
  morphSVG: { shape: "#star", type: "rotational" },
  ease: "power2.inOut"
});
MorphSVG