snap
根据特定的增量或数组中的最近值进行对齐。您可以选择性地限制仅在特定半径/距离范围内进行对齐，支持数组中的数值，包括二维点（具有"x"和"y"属性的对象），并且它会将两个维度都纳入半径计算。
请选择以下方法签名之一——立即获取一个对齐后的值，或者省略随后传入任意值进行对齐的方法：valueToSnap参数以获取一个可重复使用的函数根据您之后传入的任何值进行对齐：
1) snap(snapIncrement, valueToSnap)
- snapIncrement: 数字 - 对齐的增量值。例如，值为5表示该值将根据5的倍数进行对齐。
valueToSnap将会根据最接近的5的倍数进行对齐。 - valueToSnap: 数字 - 最终的值。这几乎可以是任何数据类型，只要它符合对应的
startValue
返回: 对齐后的值。
示例
// with a snapping increment of 10, snap the number 23.5
gsap.utils.snap(10, 23.5); // 20
// with a snapping increment of 2, snap the number 9.3
gsap.utils.snap(2, 9.3); // 10
2) snap(snapIncrement)
- snapIncrement: 数字 - 对齐的增量值。例如，值为5表示该值将根据5的倍数进行对齐。
valueToSnap将会根据最接近的5的倍数进行对齐。
返回: 一个可复用的函数，接受一个参数 —— 需要对齐的值，
如果你省略了valueToSnap（第二个）参数时，这个工具方法将返回一个可重复使用的函数它已经准备好对您稍后提供的任何值进行对齐。换句话说，返回的函数记住了snapIncrement这样以后就可以非常快速高效地进行对齐。
示例
// get a function that will always snap to the closest increment of 5
var snap = gsap.utils.snap(5); //notice we didn't provide a valueToSnap
// now we can reuse the function to snap any values:
console.log(snap(0.5)); // 0
console.log(snap(4)); // 5
console.log(snap(21)); // 20
3) snap(array, valueToSnap)
- array: 数组 - 要对齐到的一组值。
- valueToSnap: 数字 - 一个需要对齐的值。从
array中返回最近的值。
返回: 对齐后的值（即来自array)
示例
// find the closest number in the array
gsap.utils.snap([100, 50, 500], 65); // 50
gsap.utils.snap([100, 50, 500], 305); // 500
4) snap(array)
- array: 数组 - 要对齐到的一组值。
返回: 一个可复用的函数，接受一个参数 —— 用于对齐到数组中最接近的值，array
如果你省略了valueToSnap（第二个）参数时，这个工具方法将返回一个可重复使用的函数它已经准备好对您稍后提供的任何值进行对齐。换句话说，返回的函数记住了array这样以后就可以非常快速高效地进行对齐（找到数组中最近的值）。
示例
// get a reusable function that will snap to the closest value in the provided array
var snap = gsap.utils.snap([100, 50, 500]); //notice we didn't provide a valueToSnap
// now we can reuse the function to snap any values:
console.log(snap(65)); // 50
console.log(snap(415)); // 500
5) snap(objectWithRadius, valueToSnap)
- objectWithRadius: 对象 - 包含数字
radius属性以及一个values数组用于选择像{values: [0,20,60], radius: 5}或者一个increment比如{increment: 500, radius: 150}。如果您提供了一个数组，则其中的值可以是数字或包含"x"和"y"属性的对象，比如二维点。 - valueToSnap: 数字 | 对象 - 一个需要对齐的值（一个数字或包含"x"和"y"属性的对象）。如果它足够接近某个增量或数组中的某个数值
values数组（在给定的半径范围内），则会对齐到该值。否则将直接返回原始值而不做修改。
返回: 对齐后的值。如果它足够接近某个增量或数组中的某个数值/对象values数组（在给定的半径范围内），则返回该数组中的对应数值/对象。否则返回原始值不变。
示例
// snapping only occurs when the provided value is within a radius of 20 from one of the values in the array
gsap.utils.snap({ values: [0, 100, 300], radius: 20 }, 30.5); // 30.5 (because it's not within 20 of any values)
// this will snap because it's within the radius:
gsap.utils.snap({ values: [0, 100, 300], radius: 20 }, 85); // 100
// also works with points (objects with "x" and "y" properties):
var point = { x: 8, y: 8 };
gsap.utils.snap(
{
values: [
{ x: 0, y: 0 },
{ x: 10, y: 10 },
{ x: 20, y: 20 },
],
radius: 5,
},
point
); // {x:10, y:10}
// snapping only occurs when the provided value is within a radius of 150 from any increment of 500
gsap.utils.snap({ increment: 500, radius: 150 }, 975); // 1000 (because it's within 150 of an increment of 500)
6) snap(objectWithRadius)
- objectWithRadius: 对象 - 包含数字
radius属性以及一个values数组用于选择像{values: [0,20,60], radius: 5}或者一个increment比如{increment: 500, radius: 150}。如果您提供了一个数组，则其中的值可以是数字或包含"x"和"y"属性的对象，比如二维点。
返回: 一个可复用的函数，接受一个参数 —— 用于对齐到最接近的增量或array中的值，具体取决于提供的是哪一种（只有在提供半径范围内的时候才进行对齐）。
如果你省略了valueToSnap（第二个）参数时，这个工具方法将返回一个可重复使用的函数它已经准备好基于您稍后提供的任何值进行对齐。换句话说，返回的函数记住了objectWithRadius这样以后就可以非常快速高效地进行对齐（尽可能在半径范围内找到数组中或增量中最近的值）。
示例
// get a reusable function that will snap only when the provided value is within a radius of 20 from one of the values in the array
var snap = gsap.utils.snap({ values: [0, 100, 300], radius: 20 }); // notice we didn't provide a valueToSnap
// now we can reuse the function to snap any values:
console.log(snap(50)); // 50 (not within radius)
console.log(snap(86)); // 100 (within radius)
console.log(snap(315)); // 300 (within radius)
// also works with points (objects with "x" and "y" properties):
var snap = gsap.utils.snap({
values: [
{ x: 0, y: 0 },
{ x: 10, y: 10 },
{ x: 20, y: 20 },
],
radius: 5,
});
// now we can reuse the function to snap points:
console.log(snap({ x: 8, y: 8 })); // {x:10, y:10} (within radius)
console.log(snap({ x: 40, y: 40 })); // {x:40, y:40} (outside radius)
console.log(snap({ x: -5, y: -10 })); // {x:-5, y:-10} (outside radius)
// or a simple increment:
var snap = gsap.utils.snap({ increment: 500, radius: 150 }); // notice we didn't provide a valueToSnap
// now we can reuse the function to snap any values:
console.log(snap(310)); // 310 (not within radius)
console.log(snap(480)); // 500 (within radius)
console.log(snap(610)); // 500 (within radius)
提示：组合使用多个可重复使用的函数实现强大的数据转换！
你可以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);
