random
在指定范围内获取一个随机数(可选地,四舍五入到您提供的增量),或在数组中获取一个随机元素。
请选择以下方法签名之一——立即获取一个随机值或将参数设置为returnFunction
以获取一个true
函数可重复使用的函数每次调用该函数时,它会根据最初提供的范围(或数组)返回一个随机值:
1) random(最小值, 最大值*[, 快照增量, 返回函数]*)
- 最小值: 数字 - 最小值
- 最大值: 数字 - 最大值
- snapIncrement:数字(可选)- 快照增量。例如,若值为5,则随机数会四舍五入到最接近的5的倍数
- returnFunction:布尔值(可选)- 如果为
true
,则不会返回随机值而是返回一个可重用的函数。这个函数可以在任何时候被调用,用于从最初提供的范围内随机选择一个值。
返回:介于minimum
和maximum
之间的随机值,或者如果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(数组*[, 返回函数]*)
- array:数组 - 要从中随机选择的值组成的数组
- 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(最小值, 最大值*[, 返回函数]*)
- 最小值: 数字 - 最小值
- 最大值: 数字 - 最大值
- returnFunction:布尔值(可选)- 如果为
true
,则不会返回随机值而是返回一个可重用的函数。这个函数可以在任何时候被调用,用于从最初提供的范围内随机选择一个值。
返回:介于minimum
和maximum
之间的随机值,或者如果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!
});