跳过主要内容

random

在指定范围内获取一个随机数(可选地,四舍五入到您提供的增量),或在数组中获取一个随机元素。


请选择以下方法签名之一——立即获取一个随机值或将参数设置为returnFunction以获取一个true函数可重复使用的函数每次调用该函数时,它会根据最初提供的范围(或数组)返回一个随机值:

1) random(最小值, 最大值*[, 快照增量, 返回函数]*)

  1. 最小值: 数字 - 最小值
  2. 最大值: 数字 - 最大值
  3. snapIncrement:数字(可选)- 快照增量。例如,若值为5,则随机数会四舍五入到最接近的5的倍数
  4. returnFunction:布尔值(可选)- 如果为true,则不会返回随机值而是返回一个可重用的函数。这个函数可以在任何时候被调用,用于从最初提供的范围内随机选择一个值。

返回:介于minimummaximum之间的随机值,或者如果returnFunction设置为true,则返回一个可重复使用的函数,可以随时调用该函数以从最初提供的范围内随机选择一个值。

示例

// get a random number between -100 and 100 (no snapping)
gsap.utils.random(-100, 100);

// a random number between 0 and 500 that's snapped to the closest increment of 5
gsap.utils.random(0, 500, 5);

// get a reusable function that will randomly choose a value between -200 and 500, snapping to an increment of 10
var random = gsap.utils.random(-200, 500, 10, true);

// now we can call it anytime:
console.log(random()); // random value between -200 and 500, snapping to the closest 10
console.log(random()); // another random value between -200 and 500, snapping to the closest 10

2) random(数组*[, 返回函数]*)

  1. array:数组 - 要从中随机选择的值组成的数组
  2. returnFunction:布尔值(可选)- 如果为true,则不会返回随机值而是返回一个可重用的函数。这个函数可以在任何时候被调用,用于从最初提供的数组中随机选择一个值。

返回:从array之间的随机值,或者如果returnFunction设置为true,则返回一个可重复使用的函数,可以随时调用该函数以从array

示例

// get a random value from an array of colors
gsap.utils.random(["red", "blue", "green"]); //"red", "blue", or "green"

// get a reusable function that will randomly choose a value from the array of colors
var random = gsap.utils.random([0, 100, 200], true);

// now we can call it anytime:
console.log(random()); // 0, 100, or 200 (randomly selected)
console.log(random()); // 0, 100, or 200 (randomly selected again)

3) random(最小值, 最大值*[, 返回函数]*)

  1. 最小值: 数字 - 最小值
  2. 最大值: 数字 - 最大值
  3. returnFunction:布尔值(可选)- 如果为true,则不会返回随机值而是返回一个可重用的函数。这个函数可以在任何时候被调用,用于从最初提供的范围内随机选择一个值。

返回:介于minimummaximum之间的随机值,或者如果returnFunction设置为true,则返回一个可重复使用的函数,可以随时调用该函数以从最初提供的范围内随机选择一个值。

这个方法和签名1完全相同,只是省略了snapIncrement参数以便更方便使用。

示例

// get a random number between 0 and 100 (no snapping)
gsap.utils.random(0, 100);

// get a reusable function that will randomly choose a value between -10 and 50
var random = gsap.utils.random(-10, 50, true);

// now we can call it anytime:
console.log(random()); // random value between -10 and 50
console.log(random()); // another random value between -10 and 50

提示:组合使用多个可重复使用的函数实现强大的数据转换!

你可以pipe()将几个可重复使用的函数限制范围, 映射到另一个范围,对齐, 插值,以及等等。例如:

// get a clamping function that will always clamp to a range between 0 and 100
var colorizer = gsap.utils.pipe(
// clamp between 0 and 100
gsap.utils.clamp(0, 100),

// normalize to a value between 0 and 1
gsap.utils.normalize(0, 100),

// then interpolate between red and blue
gsap.utils.interpolate("red", "blue")
);

// now we feed one value in and it gets run through ALL those transformations!:
colorizer(25.874);

视频演示:结合使用工具方法

字符串形式

注意,在补间动画变量中还可以像这样使用字符串形式表示"random(-100, 100)"范围,或像这样"random([red, blue, green])"。例如:

gsap.to(".class", {
x: "random([0, 100, 200, 500])", //randomly selects one of the values (0, 100, 200, or 500)
});

甚至可以让随机数四舍五入到任意数值的最近增量!例如:

gsap.to(".class", {
x: "random(-100, 100, 5)", //chooses a random number between -100 and 100 for each target, rounding to the closest 5!
});
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗