CustomBounce

gsap.registerPlugin(CustomEase, CustomBounce) 

//Create a custom bounce ease:
CustomBounce.create("myBounce", {
  strength: 0.6,
  squash: 3,
  squashID: "myBounce-squash",
});

//do the bounce by affecting the "y" property.
gsap.from(".class", { duration: 2, y: -200, ease: "myBounce" });

//and do the squash/stretch at the same time:
gsap.to(".class", {
  duration: 2,
  scaleX: 1.4,
  scaleY: 0.6,
  ease: "myBounce-squash",
  transformOrigin: "center bottom",
});

描述​

GSAP 总是提供经过验证的"bounce"缓动效果，但并没有内置方法来自定义它的“弹跳”程度，也无法在弹跳过程中轻松获得同步的压扁和拉伸效果，原因如下：

• “弹跳”缓动需要在弹跳点处瞬间贴地，同时发生压扁动作。"bounce"并不提供这种自定义功能。
• 没有办法创建一个对应的[synchronized] scaleX/scaleY 缓动来实现压扁/拉伸的效果。CustomEase虽然现在可以解决这个问题，但手动绘制这样的缓动曲线仍然非常困难，因为所有的点必须精确对齐以匹配弹跳位置。

使用 CustomBounce，您可以设置一些参数，它将为您创建两个CustomEase（一个用于弹跳，另一个[可选]用于压扁/拉伸）。可以把 CustomBounce 看作是一个封装器，根据您传入的变量在后台生成一个 CustomEase。

CustomBounce 继承自CustomEase（您必须在项目中引入），并且允许您设置弹跳以及（可选的）压扁和拉伸效果。

参数选项​

属性

描述

• strength

  数字- 一个介于 0 和 1 之间的数值，用于决定缓动的“弹跳”程度，例如 0.9 的弹跳次数比 0.3 多很多。默认值：0.7.

• endAtStart

  Boolean- 如果true，缓动将在起始点结束，从而实现如物体静止地面、腾空跃起并最终弹跳回原地停止的效果。默认值：false.

• squash

  数字- 控制压扁持续时间（两次弹跳之间的间隙，看起来像是“粘住”了）。通常 2 是一个合适的值，但比如设为 4 将会使压扁相对缓动其余部分更长。默认值：0.

• squashID

  字符串- 应该分配给压扁缓动的 ID。默认值是弹跳的 ID 加上末尾附加的“-squash”。例如，CustomBounce.create("hop", {strength: 0.6, squash: 2})默认的压扁缓动 ID 是"hop-squash".

如何使弹跳与压扁及拉伸共同作用？你需要使用两个补间动画；一个用于位置（y），另一个用于scaleX和scaleY，两者同时运行：

gsap.registerPlugin(CustomEase, CustomBounce); // register

//Create a custom bounce ease:
CustomBounce.create("myBounce", {
  strength: 0.6,
  squash: 3,
  squashID: "myBounce-squash",
});

//do the bounce by affecting the "y" property.
gsap.from(".class", { duration: 2, y: -200, ease: "myBounce" });

//and do the squash/stretch at the same time:
gsap.to(".class", {
  duration: 2,
  scaleX: 1.4,
  scaleY: 0.6,
  ease: "myBounce-squash",
  transformOrigin: "center bottom",
});

.getSVGData()​

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

//create a CustomEase with an ID of "hop"
CustomBounce.create("myBounce", {
  strength: 0.6,
  squash: 3,
  squashID: "myBounce-squash",
});

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

字符串格式​

你也可以使用 GSAP 的简化字符串格式表示缓动，例如：

ease: "bounce(0.5)"; //<-- easy!
ease: "bounce({strength:0.5, endAtStart:true})"; //advanced

示例演示​

CustomBounce 示例演示