跳过主要内容

实用方法


GSAP 的实用方法可能会出乎意料地有用。请注意,其中许多方法可以选择返回函数,以便可以直接插入补间动画中,利用 GSAP 基于函数的功能。在这种情况下,它们将为每个目标调用一次,而不是对所有目标使用相同的最终值。

视频

组合实用方法

可用工具

checkPrefix

在必要时给提供的 CSS 属性添加前缀

clamp

将值限制在特定范围内clamp(0, 100, -12)-> 0

distribute

以线性方式或根据对象在网格中的位置(可选择应用缓动效果),在一组对象之间分配一个值。

getUnit

获取字符串的单位getUnit("30px")--> "px"。

interpolate

在几乎任何两个值之间进行插值(数字、颜色、字符串、数组、复杂的字符串,甚至是具有多个属性的对象)例如:interpolate("red", "blue", 0.5)--> "rgba(128,0,128,1)")。

mapRange: 数值

将一个范围映射到另一个范围 例如:mapRange(-10, 10, 0, 100, 5) --> 75)

normalize

将一个范围内的数字映射到从 0 到 1 的进度 例如:normalize(100, 200, 150) --> 0.5)

pipe

按顺序调用多个函数调用,将每次的结果传递给下一个函数 例如:pipe(clamp(0, 100), snap(5))(8) --> 10

random

根据参数生成随机数 例如:random(0, 100, 5) --> 65)或从提供的数组中随机选择一个元素 例如。random(["red", "green", "blue"]) --> "red"

选择器

返回一个选择器作用域限定为特定 Element(或 React ref 或 Angular ElementRef)的函数。例如:selector(myElement)

shuffle

就地打乱数组的内容。例如:shuffle([1, 2, 3, 4, 5]) --> [4, 2, 1, 5, 3])

snap

将值捕捉到某个增量上 例如:snap(5, 13)-->15或捕捉到数组中最接近的值 例如:snap([0, 5, 10], 7)-->5.

splitColor

将任意颜色拆分为红色、绿色、蓝色(可选包括透明度)分量。或者色相、饱和度和亮度。例如:splitColor("red")-->[255, 0, 0])

toArray

将几乎所有类数组对象转换为数组,甚至包括选择器文本!例如 -toArray(".class")-->[element1, element2].

unitize

包装另一个实用函数,使其可以接受带有单位的值如 "20px" 或 "50%",在传入被包装的实用函数时去掉单位,并在结果上重新加上该单位 例如:var wrap = gsap.utils.unitize( gsap.utils.wrap(0, 100) ) wrap("150px");-->"50px"。或者强制指定特定单位 例如:unitize( gsap.utils.mapRange(-10, 10, 0, 100), "%"); --> 始终返回带"%".

wrap

返回数组中的下一项或范围内的下一个数字,在给定索引之后。如果没有提供索引,则返回一个函数,该函数会在需要的时候返回对应的对象或值。

wrapYoyo

返回与提供的索引关联的数组中的元素,或者在提供的范围内返回对应的数值,在到达最后一个索引后会反向移动(来回循环)。如果没有提供待包装的值,则返回一个可复用的函数,当它接收到值时会相应地进行包装。