GSAP中文文档 - gsap.utils()

gsap.utils()

组合实用方法

gsap.utils 提供了一些非常有用的实用函数。注意，它们中的许多可以选择返回函数，以便它们可以直接插入到补间动画中，利用 GSAP 的基于函数的能力。在这种情况下，它们将为每个目标调用一次，而不仅仅是使用相同的结束值。

实用方法	描述
checkPrefix()	如果需要，为提供的 CSS 属性添加前缀（例如：checkPrefix("transform") 在 IE9 中返回 "msTransform"；如果属性根本不受支持，则返回 null）。
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"）。
selector()	返回一个作用域限定在特定元素（或 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()	将任何颜色分解为其红色、绿色、蓝色（和可选的 alpha）组件。或色相、饱和度和亮度。（例如：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()	将数字放入指定范围，使其超出最大值时回绕到起点，小于最小值时回绕到终点（例如：wrap(5, 10, 12) 返回 7）。或循环遍历一个 数组，使得当提供的索引大于数组长度时，它回绕到起点（例如：wrap([0, 10, 20], 4) 返回 10）。
wrapYoyo()	将数字放入指定范围，使其超出最大值时来回摆动回到起点，小于最小值时向前摆动到终点（例如：wrapYoyo(5, 10, 12) 返回 8）。或循环遍历一个 数组，使得当提供的索引大于数组长度时，它来回摆动回到起点（例如：wrapYoyo([0, 10, 20, 30], 4) 返回 20）。

这些实用函数覆盖了广泛的用途，从简单的数值操作到颜色处理、数组操作等，它们可以极大地增强你在 GSAP 中的动画制作能力。