MorphSVG

gsap.registerPlugin(MorphSVGPlugin) 

gsap.to("#circle", { duration: 1, morphSVG: "#hippo" });

描述​

MorphSVGPlugin 通过动画处理 SVG path 的内部数据来实现形态变换。d你可以使用一行代码将圆形变成河马：

gsap.to("#circle", { duration: 1, morphSVG: "#hippo" });

特性​

当只指定一个形状时，MorphSVGPlugin 可以接受广泛的值。

//selector string
gsap.to("#circle", {duration: 1, morphSVG: "#hippo"});

//an SVG element
var endShape = document.getElementById("hippo");
gsap.to("#circle", {duration: 1, morphSVG: endShape);

//points for  or  elements:
gsap.to("#polygon", {duration: 2, morphSVG: "240,220 240,70 70,70 70,220"});

//strings for  elements
gsap.to("#path", {duration: 2, morphSVG: "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"});

配置对象​

MorphSVG 可以作为形状的简写（如下所述），也可以是包含以下任意属性的配置对象：

属性

描述

• 形状

  字符串 | 选择器 | 元素- 要变形的目标形状。

• type

  "rotational" | "linear"

  默认情况下，形状中的所有锚点和控制点都是按线性方式插值（type: "linear"），这通常已经足够好，但你也可以设置type: "rotational"以让 MorphSVG 使用旋转和长度数据进行插值，在某些情况下可以获得更自然的形态变化。它还能完全消除在补间动画中间可能出现的光滑锚点卡顿现象。要使用这种替代方式的形态变化，只需在对象中设置 type: "rotational"：

  gsap.to("#shape1", {
   duration: 2, 
   morphSVG:{
    shape: "#shape2",
    type: "rotational"
   }
  })
  

  这个概念最好的理解方式是可视化观看，因此这里有一些视频和演示……

  查看更多详细信息

  线性和旋转形态变化的交互式比较

• origin

  字符串

  设置旋转的原点。默认值为50% 50%。格式可以是一个包含两个百分比值的字符串，或者如果起始形状和结束形状有不同的值，则可以是包含四个值的字符串。

  设置自定义原点：

  gsap.to("#shape1", {
    duration: 2,
    morphSVG: {
      shape: "#shape2",
      type: "rotational",
      origin: "20% 60%", //or "20% 60%,35% 90%" if there are different values for the start and end shapes.
    },
  });
  

  有时候围绕某一点旋转的效果看起来不理想，在这种情况下，最好进行实验并设置自己的自定义原点以进一步改善效果。我们为此创建了一个 findMorphOrigin() 实用函数，帮助实现此目的……

  查看更多详细信息

  findMorphOrigin 允许你简单地传入起始和结束形状，然后它会叠加一个你可以拖动的原点，以便精确查看它对形态变化的影响！在下面的演示中，进入 JS 面板并取消注释 findMorphIndex() 的那行代码，你就能确切了解它是如何工作的。拖动原点并观察它如何影响形态变化。

• shapeIndex

  数值

  shapeIndex 属性允许你调整起始形状中的点是如何映射的。以下代码会将正方形中的第三个点映射到星形的第一个点。

  gsap.to("#square", {
    duration: 1,
    morphSVG: { shape: "#star", shapeIndex: 3 },
  });
  
  查看更多详细信息

  为了避免动画期间点漂移严重，MorphSVGPlugin 需要在起始路径中找到一个靠近目标路径第一个点的点。一旦找到该点，它就会将起始路径中的下一个点映射到目标路径中的第二个点（以此类推）。

  由于矢量图的复杂性，有时你可能希望更改起始路径中哪个点被映射到目标路径的第一个点。这时就需要使用 shapeIndex。

  注意事项

  • shapeIndex 仅适用于闭合路径。
  • 如果你提供的是负数 shapeIndex，则起始路径将被完全反转（这可能非常有用）

• map

  大小 | 位置 | 复杂度

  如果你的路径内的子段在起始和结束形状之间的匹配情况不如预期，你可以使用map来告诉 MorphSVGPlugin 使用哪种算法优先匹配：

  • "size"(默认值) - 基于整体大小匹配段落。如果有多个段落大小接近，它会使用位置数据进行匹配。这种模式通常能提供最直观的形态变化。
  • "position"- 主要基于位置进行匹配。
  • "complexity"- 仅基于锚点数量进行匹配。这是最快的算法，可以通过在 SVG 编辑工具中手动添加锚点来“欺骗”系统进行匹配，从而使你想匹配的部分包含相同数量的锚点（虽然这完全是可选的）。

  gsap.to("#id", {
    duration: 1,
    morphSVG: { shape: "#otherID", map: "complexity" },
  });
  
  查看更多详细信息

  注意事项

  • map默认模式通常已经足够优秀，因此是否使用是完全可选的。
  • 如果地图模式中没有一个能将路径段匹配成你想要的样子，那最好只是把你的路径拆分成为多个路径，然后分别变形每个路径。这样你可以获得完全的控制权。

• 精度

  数值

  默认情况下，为了最大化性能和减少字符串长度，MorphSVGPlugin 会将数值四舍五入到小数点后两位，但如果你需要不同的设置，可以指定小数位数。precision设置为你希望的小数位数。例如，precision: 5会四舍五入到小数点后五位：

  gsap.to("#id", { morphSVG: { shape: "#other-id", precision: 5 } });
  

• 渲染

  函数

  定义一个渲染函数，该函数会在路径更新时被调用。更多信息请参见渲染到画布

• 预编译

  数组

  让 MorphSVGPlugin 执行其所有初始计算，并返回一个包含转换后的字符串数组，将其记录到控制台，你可以复制粘贴回补间动画中。这样，当补间开始时就可以直接获取所有值，而不是进行复杂的计算。

  更多信息请参见预编译

提示​

findShapeIndex() 工具​

尝试使用shapeIndex可能有点猜谜游戏的感觉。为让事情更简单，我们创建了一个独立的工具函数叫做findShapeIndex()。该函数提供了一个交互式的用户界面来帮助你可视化起点的位置、修改它并预览动画。

你可以加载findShapeIndex()来自这个下载链接.

加载完成后，只需告诉它要使用的形状。

findShapeIndex("#square", "#star");

或传递原始数据：

findShapeIndex(
  "#square",
  "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"
);

将 SVG 形状转换为路径​

技术上讲，只能对<path>路径元素或<polyline>/<polygon>多边形元素进行变形，<circle>, <rect>, <ellipse>，或者<line>但是如果想变形的是矩形怎么办？没问题——只需调用这个工具函数，让插件为您完成转换：

MorphSVGPlugin.convertToPath("#elementID");

你可以传入一个元素或者选择器文本，因此也可以通过一行代码转换所有的这些元素：

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

这实际上是在 DOM 中直接替换每一个为对应的路径元素，外观应该绝对相同。它会保留属性，如“id”属性。因此在转换之后，你应该能够很容易地定位到这些元素，就像之前一样。

//An svg <rect> Like this:
<rect id="endShape" width="100" height="100" fill="red"/>
//becomes
<path id="endShape" fill="red" d="M100,0 v100 h-100 v-100 h100z"></path>

向多个形状变形​

因为 MorphSVGPlugin 与 GSAP 紧密集成在一起，所以顺序播放多个变形效果非常容易。看看如何轻松地让圆变形为河马、星星、大象再回到圆形。

tl.to(circle, { duration: 1, morphSVG: "#hippo" }, "+=1")
  .to(circle, { duration: 1, morphSVG: "#star" }, "+=1")
  .to(circle, { duration: 1, morphSVG: "#elephant" }, "+=1")
  .to(circle, { duration: 1, morphSVG: circle }, "+=1");

性能​

提前定义一个 shapeIndex​

//logs a value like "shapeIndex:[3]"
gsap.to("#id", {
  duration: 1,
  morphSVG: { shape: "#otherID", shapeIndex: "log" },
});
//now you can grab the value from the console and drop it in...
gsap.to("#id", {
  duration: 1,
  morphSVG: { shape: "#otherID", shapeIndex: [3] },
});

预编译​

//logs a value like precompile:["M0,0 C100,200 120,500 300,145 34,245 560,46","M0,0 C200,300 100,400 230,400 100,456 400,300"]
gsap.to("#id", {
  duration: 1,
  morphSVG: { shape: "#otherID", precompile: "log" },
});
//now you can grab the value from the console and drop it in...
gsap.to("#id", {
  duration: 1,
  morphSVG: {
    shape: "#otherID",
    precompile: [
      "M0,0 C100,200 120,500 300,145 34,245 560,46",
      "M0,0 C200,300 100,400 230,400 100,456 400,300",
    ],
  },
});

渲染到画布​

let canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  vw = (canvas.width = window.innerWidth),
  vh = (canvas.height = window.innerHeight);
ctx.fillStyle = "#ccc";
gsap.to("#hippo", {
  duration: 2,
  morphSVG: {
    shape: "#circle",
    render: draw,
  },
});
function draw(rawPath, target) {
  let l, segment, j, i;
  ctx.clearRect(0, 0, vw, vh);
  ctx.beginPath();
  for (j = 0; j < rawPath.length; j++) {
    segment = rawPath[j];
    l = segment.length;
    ctx.moveTo(segment[0], segment[1]);
    for (i = 2; i < l; i += 6) {
      ctx.bezierCurveTo(
        segment[i],
        segment[i + 1],
        segment[i + 2],
        segment[i + 3],
        segment[i + 4],
        segment[i + 5]
      );
    }
    if (segment.closed) {
      ctx.closePath();
    }
  }
  ctx.fill("evenodd");
}

MorphSVGPlugin.defaultRender = yourFunction;

gsap.to("#hippo", {
  duration: 2,
  morphSVG: {
    shape: "#circle",
    render: draw,
    updateTarget: false,
  },
});

MorphSVGPlugin.defaultUpdateTarget = false;

视频操作指南​

用于复杂变形的高级功能​

性能建议​

属性​

方法​

示例演示​

查看完整系列的SVG 动画演示在 CodePen 上。