实用方法
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 | 返回与提供的索引关联的数组中的元素，或者在提供的范围内返回对应的数值，在到达最后一个索引后会反向移动（来回循环）。如果没有提供待包装的值，则返回一个可复用的函数，当它接收到值时会相应地进行包装。 |