跳过主要内容

辅助函数

多年来 Jack 为社区成员“快速编写”了各种与 GSAP 相关的辅助函数,因此我们为了方便起见将它们集中在一个地方。我们将继续添加相关的辅助函数。祝您使用愉快!

浏览辅助函数集合

可用的辅助函数

沿着 x 轴或 y 轴无缝循环元素

像滑块或新闻滚动条一样,其中元素从一边移出,最终再从另一边返回。这个辅助函数为您完成所有繁重的工作。

停止过度滚动行为,甚至在 iOS Safari 上也是如此。

设置 overscroll-behavior: none 在 CSS 中应该很简单,但 iOS Safari 不会配合!因此我们提供了这个能帮助阻止过度滚动行为的函数:

将 Lottie 动画连接到 ScrollTrigger。

使用此便捷函数将 Lottie 动画绑定到滚动位置,这样当用户滚动时,动画就会随之进行。

addWeightedEases

向任何标准(不可配置)缓动函数中提供介于 -1 和 1 之间的比例值,从而使其在某个方向上“加权”。

在不发生跳跃的情况下更改transformOrigin

动态更改 transformOrigin 而不会出现跳跃。

anchorsToProgress

计算路径上锚点的所有进度值,以便例如您可以使用 DrawSVG 逐点动画化(需要MotionPathPlugin)

动画化背景大小:"cover" 或 "contain"

在 `backgroundSize` 的 `"cover"` 或 `"contain"` 之间进行动画化。

blendEases

如果您的动画开始时需要一种缓动方式,而在结束时需要另一种,则可以使用该函数将其混合!

在视口调整大小结束后调用一个函数(防抖处理)。

当用户拖动浏览器窗口边缘时,“resize”事件会被多次触发,因此如果您在每次 resize 事件中运行开销较大的函数,可能会显著影响性能。以下函数将在用户停止调整窗口大小之后等待一定时间,再调用您的函数。

补偿性倾斜。

这是一个特殊方法,可以通过 onUpdate 应用,使 tween 渲染 GSAP 2 中旧版 skewType: "compensated" 方式的倾斜。请注意,它会影响元素的 scaleX/scaleY(因此称为“补偿型”)!这假设倾斜是基于角度的,并且仅适用于 GSAP 3。

方向性吸附。

根据指定的方向(更大或更小)吸附到某个值。

估算缓动何时达到特定值。

缓动接受一个归一化的进度值(0-1),并返回对应的缓动值,但如果您想知道该缓动值何时会达到某个特定比例,比如 0.7,该怎么办?例如,"power2.out" 缓动可能在线性进度约为 0.33 时就达到了 0.7。这个函数允许您输入该 0.7,然后获取对应线性进度值(在这个例子中是 0.33)。

简单 FLIP。

如果您正在对 DOM 元素进行重新排列,然后希望元素动画化过渡到新位置,最完整的方式是使用Flip 插件,但如果您只是做一些基础操作,可以使用此辅助函数(请参阅顶部注释了解如何使用它):

使用逗号和有限的小数位数格式化数字。

将像 1000.254145 这样的数字格式化为类似 "1,000.25" 的字符串。

查找嵌套标签的时间。

标签是时间轴特有的,因此不能让时间轴将其播放头移动到嵌套时间轴中存在的标签。这是一个辅助函数,允许您查找嵌套标签,并计算其在父时间轴上的位置。

获取与元素相关联的滚动位置(支持 ScrollTrigger)。

此函数在大多数情况下都会考虑到 ScrollTrigger 的固定定位功能。提供目标元素,它将返回一个函数,稍后可以调用该函数并传入特定目标元素,返回对应的滚动位置。即使视口尺寸变化(响应式布局)也可以自动调整。

获取与特定 ScrollTrigger 触发动画相关联的滚动位置。

也许您想将页面滚动到特定 ScrollTrigger 触发动画开始(或结束,或任意进度值)的确切位置 —— 只需将此辅助函数传入您的动画(当然它必须具有 ScrollTrigger)以及可选的进度值(0 表示动画开始,0.5 表示中间,1 表示结束),它将返回滚动位置,您可以将该数值用于 scrollTo 动画。

拖动浏览画布图像序列

创建一个图像URL数组,将其与对你的<canvas>对象的引用以及一个ScrollTrigger配置对象一起传递给此辅助函数,让它依次浏览这些图像,并将合适的图像绘制到画布上。

killChildTweensOf

终止所有属于指定目标子元素的补间动画

嵌套元素中的SplitText行

SplitText原生不支持按“行”拆分嵌套元素,但如果你确实需要该功能,我们为此准备了一个辅助函数。

pluckRandomFrom

从数组中逐一随机挑选值,直到所有值都被选过一次(几乎就像每次选一个之后,它就不再可用,直到所有项都被唯一地选过一遍)

分步骤调用函数逐步构建时间轴

或许你无法预先构建整个时间轴,因为你需要以有序的方式逐个调用各个函数。可能每个函数都会更改元素的状态,从而创建出必须在下一步(函数)调用前完成的动画。这个辅助函数可以让你非常轻松地将代码组织成一个简单的参数序列来传递

在不发生跳跃的情况下更改transformOrigin

通过补偿其位移(x/y)在动态更改transformOrigin时避免出现跳跃

在标签页隐藏时强制GSAP更新

大多数浏览器为了减少CPU和电池消耗,在标签页隐藏时会暂停requestAnimationFrame()的调用,但如果你希望GSAP继续更新,可以使用这个函数

跟踪任何动画的播放头方向

如果你需要一个onReverse()回调(实际上不存在),或需要一种方式在播放头方向改变时收到通知,这个辅助函数将非常有用

加权随机

通过为你选择的缓动曲线提供此函数,获得对你所选取数值的更多控制!