MorphSVG type:"rotational" 实现更自然的变形

• 类型:
  线性
  旋转
• 原点:
• 显示锚点

新的 type:"rotational" 选项做了两件事:

1. 通过找到起始和结束形状中平滑的任何锚点，并强制它们在变形过程中保持平滑，来避免出现折痕。
2. 不是在坐标之间线性插值（直线），而是围绕一个原点（此演示中的绿色点）旋转它们，默认情况下原点是形状的中心，但你可以使用任何基于百分比的值或关键字，如"center top" 或 "20% 80%"。

示例代码:

gsap.to("#start", {
  duration: 2,
  morphSVG:{
    shape:"#end",
    type:"rotational",
    origin:"20% 60%"
  },
  ease: "power1.inOut"
});

了解更多 MorphSVGPlugin。