跳过主要内容

wrap

返回值:*

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


将一个数字(或数组的索引)放入指定范围内,当其超过最大值时会回到起始位置,如果小于最小值,则会绕到末尾。在补间动画上下文中,这具有循环遍历值的效果。

举个例子,如果你有 10 个带有"box"类名应用的元素,并且你有一组颜色想让这些元素依次动画过渡;["red", "green", "yellow"]color 数组里第一个颜色是"red",第三个是"green",第三个是"yellow"然后再次循环,因此第四个元素将转到"red",第五个是"green",依此类推,wrap()非常适合这个场景。如果我们不提供index值,我们会得到一个function而是准备好相应地进行循环。

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

//or use a range
let num = gsap.utils.wrap(5, 10, 12); // 7 (12 is two more than the max of 10, so it wraps around to the start and goes two up from there)

//if we don't provide an index, we get a function that's ready to do wrapping accordingly
let wrapper = gsap.utils.wrap(["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 = wrapper(5) // "yellow"

加载中...

参数

  1. 值 1: [数组 | 数字] - 要使用的值数组或者范围中的最小数字。如果提供了数组,则索引成为第二个参数。
  2. 值 2 : 数字- 范围中的最大数字或者如果第一个参数是数组,则此参数应为索引。
  3. 索引 : 数字- (可选)在给定范围内应用包装的数字
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗