CustomEase

gsap.registerPlugin(CustomEase) 

CustomEase.create(
  "hop",
  "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

//now you can reference the ease by ID (as a string):
gsap.to(element, { duration: 1, y: -100, ease: "hop" });

描述​

CustomEase 让你摆脱预设缓动选项的限制；只需简单地在图形中绘制，即可创建任何你想象得到的缓动曲线缓动可视化工具或者复制/粘贴一个 SVG 路径。无任何限制。你可以使用任意数量的控制点。

复制/粘贴 SVG​

当处于 Ease Visualizer 的“自定义”模式时，你可以选择底部的紫色文本（即 CustomEase 数据字符串），将其全部选中，然后粘贴一个 SVG 路径（例如来自 Adobe Illustrator 的路径），之后点击其他地方，Ease Visualizer 将获取第一个<path>并将其转换为正确的格式。

使用 cubic-bezier 值​

CustomEase 同样支持标准的cubic-bezier()包含四个数字的字符串，比如你可以从cubic-bezier.com。例如，".17,.67,.83,.67"获取的值。可以将其粘贴到 Ease Visualizer 底部的橙色文本区域中，或者直接传入CustomEase.create()方法访问它们，例如：CustomEase.create("easeName", ".17,.67,.83,.67");.

代码​

不需要在每个补间动画中都使用很长的数据字符串，你只需create()一次性创建 CustomEase（通常在页面或应用程序加载时），并为其分配一个便于记忆的 ID（例如"hop"或者"wiggle"或你喜欢的任何名称），并在后续所有补间动画中引用这个 ID，例如：

//define your CustomEase and give it an ID ("hop" in this case)

CustomEase.create(
  "hop",
  "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

//now you can reference the ease by ID (as a string):
gsap.to(element, { duration: 1, y: -100, ease: "hop" });

初始创建缓动确保了动画期间的最大性能，因为在内部计算所有点并优化数据以实现极快的运行性能时存在一定的开销。这些操作仅在创建时发生一次。

通常路径字符串使用归一化值（0-1），但你也可以传入任何使用三次贝塞尔指令（"M"、"C"、"S"、"L" 或 "Z" 命令）的 SVG 路径数据，它会在内部自动进行归一化处理。

.getSVGData()​

CustomEase 提供一个getSVGData()方法，用于计算 SVG<path>数据字符串以便以你定义的任意尺寸图形化显示缓动效果，例如{width: 500, height: 400, x: 10, y: 50}。你可以传入一个 CustomEase 或与其关联的 ID，甚至是一个标准缓动如"power2"。传入一个path在 vars 对象中，它会自动填充其d属性，例如：

//create a CustomEase with an ID of "hop"
CustomEase.create(
  "hop",
  "M0,0 C0,0 0.056,0.445 0.175,0.445 0.294,0.445 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

//draw the ease visually in the SVG  that has an ID of "ease" at 500px by 400px:
CustomEase.getSVGData("hop", { width: 500, height: 400, path: "#ease" });

命名注意事项​

通常不建议将你的缓动命名为与某个标准缓动相同的名字，比如 "expo" 或 "power1" 等，因为这样实质上会覆盖该标准缓动，并将其替换为你自己的 CustomEase。

示例演示​

• CustomEase 示例

视频​

常见问题​

gsap.registerPlugin(undefined)

gsap.registerPlugin(undefined)