MotionPathHelper

gsap.registerPlugin(MotionPathHelper) 

MotionPathHelper.create(tween);

MotionPathHelper 可让你直接在浏览器中交互式地编辑运动路径通过拖动其锚点和控制点、添加/删除这些点，或者拖动整条路径！如果你尚未拥有运动路径，你可以从零开始新建一条。完成编辑后，只需点击屏幕底部的“COPY MOTION PATH（复制运动路径）”大按钮，即可将路径数据字符串复制到剪贴板，以便之后可将其直接粘贴到你的补间动画或SVG中<path>，你将会用它来实现运动路径动画。

如果没有 MotionPathHelper，你需要在浏览器和类似 Inkscape 或 Adobe Illustrator 的 SVG 编辑器之间来回切换，这个过程既耗时又令人沮丧。

视频​

用法​

调用MotionPathHelper.create()并传入以下任一参数：

• A Tween包含已定义 motionPath 的实例。在这种情况下，它将从 Tween 中获取运动路径，并使其在浏览器中可编辑。例如：

  const tween = gsap.to("#id", {
    motionPath: {
      path: "#path",
      align: "#path",
      alignOrigin: [0.5, 0.5],
    },
  });
  
  // pass the tween instance in here...
  MotionPathHelper.create(tween);
  

• 一个元素（或选择器文本）。在这种情况下，它会创建一个新的非常基础的运动路径曲线，你可以开始对其进行编辑。例如：

  // just pass the element or selector text:
  MotionPathHelper.create("#id");
  

配置对象​

你可以选择性地传入一个vars参数以进一步配置运动路径助手。该参数是一个对象，可以包含以下任意属性：

属性

描述

• ease

  数字- 循环预览动画所使用的缓动效果。

• 持续时间

  数字- 循环预览动画的持续时间（每次迭代）。

• path

  字符串 | 元素 | 数组沿其对目标进行动画处理的运动路径。这可以是直接引用的或选择器文本，也可以是像 "M9,100c0,0,18-41,49-65" 这样的路径数据，或者是路径应经过的一组点组成的数组。

• pathColor

  字符串- 路径描边的颜色（仅当未定义path且 MotionPathHelper 必须创建一个时才适用）。

• pathWidth

  数字- 路径的描边宽度（仅当未定义path且 MotionPathHelper 必须创建一个时才适用）。

• pathOpacity

  数字- 路径描边的透明度（仅当未定义path且 MotionPathHelper 必须创建一个时才适用）。

• selected

  Boolean- 路径是否初始被选中。

• start

  数字- 沿着路径开始的位置，其中0是起点，1是终点，0.5是中间点。它可以是任何正或负的小数。例如，0.3将使元素从曲线的30%位置开始。默认为0。这只在 MotionPathHelper 没有显示现有动画的情况下适用。

• end

  数字- 沿着路径结束的位置，其中0是起点，1是终点，0.5是中间点。它可以是任何正或负的小数，包括比start还要小的值（这将使对象向后移动）。例如，0.6将使元素在曲线的60%位置结束。1.5则会使它绕回起点并在中间点停止。默认值为1。这只在 MotionPathHelper 没有显示现有动画的情况下适用。

示例代码​

MotionPathHelper.create("#elementID", {
  path: "#path",
  pathWidth: 5,
  pathColor: "red",
  pathOpacity: 0.6,
  selected: true,
  start: 0.1,
  end: 1,
  duration: 5,
  ease: "power2.inOut",
});

演示​

方法​