1.类型:Object
gsap.utils提供了对一些非常有用的实用程序函数的访问。注意,它们中的许多可以选择返回函数,以便可以直接插入到补间中,利用GSAP基于函数的功能。在这种情况下,它们将为每个目标调用一次,而不是对所有目标都使用相同的结束值。
2.方法集合
checkPrefix():在必要时为所提供的CSS属性添加前缀(例如:checkPrefix("transform")——> "msTransform"当在IE9中运行时;如果根本不支持该属性则返回null)。
clamp():钳制一个值以适应特定的范围(例如:clamp(0,100, -12)——> 0)。
distribute():线性或根据对象在网格中的位置在对象数组中分配值,可选地应用了easing。
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)的选择器函数。(例:选择器(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"). 或者强制指定单位 (ex: 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)。或者在一个数组中循环,当提供的索引大于数组长度时,它会绕回开始位置(例如:wrap([0,10,20,30], 4)——> 20)
3.应用示例详解参考
示例详解
网友评论