摘要:Random Numbers(随机数方法)提供了多样化的随机数生成工具,包括均匀分布和高斯分布的随机数,以及基于柏林噪声的平滑随机变化。
Random Numbers(随机数方法)提供了多样化的随机数生成工具,包括均匀分布和高斯分布的随机数,以及基于柏林噪声的平滑随机变化。
这些方法使设计师能够创建丰富、多变且自然的动画效果,从基本的随机动画到复杂的程序化纹理生成。
seedRandom( seed, timeless )
用于设置随机数种子值。
参数:
seed :用于设置随机数生成器的种子值(Number)。不同的 seed 会产生不同的随机数序列。
timeless :Boolean,可选。默认为 false。如果设置为 true,则不使用当前时间作为随机数生成的输入,这样生成的随机数在时间上是恒定的。
返回值:无。该方法仅用于设置随机数生成器的种子,不返回任何值。
应用:
通过设置相同的种子值,可以在多个图层或项目中生成一致的随机效果。 或者,确保在不同时间点或不同项目中获得相同的随机结果,以便进行调试和测试。
// 设置随机种子为42,生成可重复的随机数seedRandom(42, true);randomValue = random;randomValue;// 设置随机种子为123,生成一致的随机位置偏移seedRandom(123, true);offset = random([-50, -50], [50, 50]);position + offset;//对位置属性设置了固定种子的形状图层,复制后有同样的随机数值seedRandom(50);x =wiggle(1,100);[x[0],value[1]];//不透明度属性的以下表达式可将不透明度值设为不随时间而改变的随机值seedRandom(123, true);random*100;seedRandom 必须在调用其他随机数函数(如 random、gaussRandom、wiggle 等)之前使用,以确保随机数的生成顺序和结果一致。
random
生成一个在 0 到 1 之间的随机数。
参数:无
返回值:返回 0 ~ 1 之间的随机数(Number)。
应用:
用于需要随机性但不需要特定范围的场景。比如,生成随机的动画属性,如位置、缩放或旋转等。该方法依赖于当前的随机数种子。
// 为图层的不透明度生成一个随机值opacity = random * 100; // 0 到 100 之间opacity;// 创建一个简单的随机缩放效果scaleFactor = random * 50 + 50; // 50 到 100 之间[scaleFactor, scaleFactor];random(maxValOrArray)
生成 0 到 maxValOrArray 之间的随机数值或数组。
参数:
maxValOrArray :数值(Number)或数组(Array)。
返回值:如果参数是数值,则返回一个在 0 到该数值之间的随机数(Number);如果参数是数组,则返回一个与输入数组维度相同的随机数数组(Array),每个元素在 0 到对应的 maxValOrArray 元素之间。
应用:
生成特定范围内的随机数,用于控制动画属性的变化。
或者,从预定义的选项中随机选择一个值,如颜色、图层样式等。
// 为图层的位置生成一个在0到500之间的随机X坐标x = random(500);y = position[1];[x, y];// 从预定义的颜色数组中随机选择一个颜色seedRandom(1,false); // 设置种子以确保可重复性// 定义颜色数组,每个颜色为一个包含四个数值的数组colors = [ [1, 1, 1,1], // 白色 [1, 0, 0,1], // 红色 [0, 1, 0,1], // 绿色 [0, 0, 1,1] // 蓝色];// 生成一个随机索引,范围从0到colors.length - 1randomIndex = Math.floor(random(0, colors.length));// 通过随机索引从颜色数组中选择一个颜色randomColor = colors[randomIndex];// 返回选中的随机颜色randomColor;random(minValOrArray, maxValOrArray)
生成在 minValOrArray 到 maxValOrArray 之间的随机数值或数组。
参数:
minValOrArray :最小的数值(Number)或数组(Array)。
maxValOrArray :最大的数值(Number)或数组(Array)。
返回值:当参数为两个数值时,返回一个在 minValOrArray 到maxValOrArray 之间的随机数(Number)。当参数为两个数组时,函数逐元素生成一个在对应最小值和最大值之间的随机数,返回一个新的数组(Array)。
应用:
精确控制生成随机数的下限和上限。
创建具有特定范围的随机位置、缩放或旋转矢量。
// 为图层的不透明度生成一个在50到100之间的随机值opacity = random(50, 100);opacity;// 为图层的位置生成一个在[-100, 100]范围内的随机X和Y坐标randomPosition = random([-100, -100], [100, 100]);randomPosition;gaussRandom
生成一个具有高斯(钟形)分布的随机数。
参数:无
返回值: 生成的随机数(Number)大部分集中在 0 到 1 之间,约有 90% 的结果在此范围内,其余 10% 超出该范围。
应用:
创建更自然、符合人类感知的随机动画效果,如抖动或波动。
用于需要正态分布随机数的场景,如模拟物理现象。
// 使用高斯随机数创建更自然的抖动效果amplitude = 50;jitter = gaussRandom * amplitude;[position[0] + jitter, position[1] + jitter];// 为图层的旋转添加高斯分布的随机偏移rotationOffset = gaussRandom * 10; // 平均偏移0度,标准差10度rotation + rotationOffset;gaussRandom(maxValOrArray)
生成在 0 到 maxValOrArray 之间的呈高斯分布的随机数值或数组。
参数:
maxValOrArray :数值(Number)或数组(Array)。
返回值:如果参数是数值,则返回一个具有高斯分布的随机数(Number);如果参数是数组,则返回一个与输入数组维度相同的随机数数组(Array),每个元素具有高斯分布。
应用:
通过调整标准差,控制随机数的分布范围。
为矢量属性生成具有不同分布的随机值。
// 为图层的位置生成一个遵循高斯分布的随机X坐标,标准差为100x = gaussRandom(100);y = position[1];[x, y];// 为图层的位置生成一个3D随机矢量,标准差为50randomVec = gaussRandom([50, 50, 50]);[position[0] + randomVec[0], position[1] + randomVec[1], position[2] + randomVec[2]];gaussRandom(minValOrArray, maxValOrArray)
生成在 minValOrArray 到 maxValOrArray 之间的呈高斯分布的随机数值或数组。
参数:
minValOrArray :最小的数值(Number)或数组(Array)。
maxValOrArray :最大的数值(Number)或数组(Array)。
返回值:当参数为两个数值时,返回一个遵循高斯分布的随机数,平均值为 (minValOrArray + maxValOrArray)/2,标准差根据范围计算。当参数为两个数组时,函数对两个数组中的对应元素应用高斯分布,返回一个新的数组。
应用:
生成具有指定范围的高斯分布随机数。
为矢量属性生成具有特定范围的高斯分布随机值。
// 为图层的位置生成一个遵循高斯分布的随机X坐标,范围在-50到50之间x = gaussRandom(-50, 50);y = position[1];[x, y];// 为图层的缩放生成一个遵循高斯分布的随机矢量,X在80到120之间,Y在90到110之间randomScale = gaussRandom([80, 90], [120, 110]);randomScale;noise(valOrArray)
返回一个在 -1 到 1 之间的基于柏林噪声(Perlin noise)的连续且平滑变化的随机数。
参数:
valOrArray : 如果是数值(Number),表示一个单一的输入值,通常与时间 (time) 或其他动态参数相关联;如果是数组(Array),通常用于表示多维输入(如二维或三维坐标)。
返回值:参数为数值时,返回一个在 -1 到 1 之间的随机数(Number)。参数为数组时,返回一个在 -1 到 1 之间的随机数(Number),该数值基于数组中各元素的组合。
二维噪声:noise([x, y]) 以及三维噪声:noise([x, y, z])。每个元素代表一个独立的维度坐标,影响噪声值的计算。
噪声值基于输入数组中各维度的坐标,通过复杂的算法计算得出。不同的维度组合会产生不同的噪声模式,允许生成复杂且独特的动画效果。
应用:
此方法基于柏林噪声,这意味着相邻的两个输入值的返回值往往也是相邻的。与传统的 random 方法不同,noise 生成的数值具有连续性和平滑性,这使得它非常适合用于模拟自然和流畅的动画效果,如自然的摇晃、飘动或波动。
//示例 1:为图层生成平滑的旋转动画// 生成基于时间的噪声值noiseValue = noise(time);// 将噪声值映射到旋转范围,例如 -30 到 30 度rotation = noiseValue * 30;// 应用到旋转属性rotation;//示例 2:为位置生成平滑的随机偏移量// 定义噪声的基础输入,例如使用当前时间noiseInput = time;// 生成噪声值,确保了 X 轴和 Y 轴的噪声值是独立的。这意味着 X 轴的运动不会直接影响 Y 轴的运动,反之亦然,从而产生更加自然和多样化的动画效果。noiseX = noise([noiseInput, 0]); //生成基于 noiseInput 和 0 的噪声值,用于X轴。noiseY = noise([0, noiseInput]); //生成基于 0 和 noiseInput 的噪声值,用于Y轴。// 将噪声值映射到偏移量范围,例如 -50 到 50 像素offsetX = noiseX * 50;offsetY = noiseY * 50;// 应用到位置属性[position[0] + offsetX, position[1] + offsetY];//示例 3:生成三维平滑的旋转动画// 定义噪声输入,通常与时间相关noiseInput = time;// 生成X轴、Y轴和Z轴的噪声值noiseX = noise([noiseInput, 0, 0]);noiseY = noise([0, noiseInput, 0]);noiseZ = noise([0, 0, noiseInput]);// 定义旋转的幅度amplitude = 30; // 度// 计算旋转角度rotationX = noiseX * amplitude;rotationY = noiseY * amplitude;rotationZ = noiseZ * amplitude;// 设置新的旋转[rotationX, rotationY, rotationZ];“点赞有美意,赞赏是鼓励”
来源:煜城教育