跳过主要内容

wrapYoyo

返回值:*

当提供一个索引或者某个范围内的数字时,返回数组中对应的元素,在到达最后一个索引后会反向移动(来回循环)。如果没有提供需要循环的值,则返回一个可重用的函数函数,当传入一个值时会按需进行循环。


将一个数值放入指定范围内,当其超过最大值时,它会像溜溜球一样返回起始位置;如果比最小值还小,则会向前跳到末尾。在补间动画(tweening)上下文中,这将产生来回循环遍历值的效果。

举个例子,如果你有 10 个带有"box"类名应用的元素,并且你有一组颜色想让这些元素依次动画过渡;["red", "green", "yellow"]color 数组里第一个颜色是"red",第三个是"green",第三个是"yellow"接着倒序回到第四个颜色是"green",第五个是"red"然后再正向循环回"green",依此类推,wrapYoyo()非常适合这个场景。如果我们不提供index值,我们会得到一个function函数作为替代,该函数可以根据需求进行 wrap-yoyo 处理。

//returns the corresponding value in the array (wrapping back to the beginning when necessary)
let color = gsap.utils.wrapYoyo(["red", "green", "yellow"], 5); // "red" (index 5 maps to index 0 in a 3-element Array)

//or use a range
let num = gsap.utils.wrapYoyo(5, 10, 12); // 8 (12 is two past the max of 10, thus the yoyo would go backward to 8)

//if we don't provide an index, we get a function that's ready to do wrapping accordingly
let wrap = gsap.utils.wrapYoyo(["red", "green", "yellow"]);

//now we just feed an index number into the function we got back from the line above and we'll get the corresponding value from the wrapped Array
let color = wrap(5) // "green"

加载中...

参数

  1. 值 1: [数组 | 数字] - 要使用的值数组或者垂直位置最小值或者某个数值范围中的最大数。如果提供了数组,那么 index 是第二个参数。
  2. 值 2 : 数字- 变量最大值数值范围的最小值或者如果第一个参数是一个数组,那此参数应该是要包装的索引值。
  3. 索引 : 数字- (可选)要包裹进范围的数字。
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗