interpolate
一种超级灵活的方法，可以在任意两个相同类型值之间进行线性插值（数字、颜色、字符串、数组、包含多组嵌入数字的复杂字符串、具有多个属性的对象……几乎任何内容都可以！）。你提供一个progress介于0到1之间的值，其中0.5表示中间值，并且它将根据该值返回对应的插值结果。
从以下方法签名中选择一种——立即获取插值结果，或者省略稍后可以根据你传入的进度值进行插值的progress参数以获取一个可重复使用的函数根据你之后传入的任何进度值来执行插值操作：
1) interpolate(startValue, endValue, progress)
- startValue: * - 起始值。这可以是几乎任何数据类型（数字、字符串、数组、复杂字符串、颜色、对象）
- endValue: * - 结束值。只要与startValue的数据类型一致，也几乎可以是任何数据类型
startValue - progress（进度）: Number - 介于0到1之间的值，其中0表示起始位置，0.5表示中间位置，1表示结束位置。
返回: 插值后的结果。颜色将以rgba()格式返回（如果在结束值中检测到hsla()，则以hsla()格式返回）
示例
//interpolate halfway between 0 and 500 (number)
gsap.utils.interpolate(0, 500, 0.5); // 250
// strings
gsap.utils.interpolate("20px", "40px", 0.5); // "30px"
//colors
gsap.utils.interpolate("red", "blue", 0.5); // "rgba(128,0,128,1)"
//objects
gsap.utils.interpolate(
{ a: 0, b: 10, c: "red" },
{ a: 100, b: 20, c: "blue" },
0.5
); // {a: 50, b: 15, c: "rgba(128,0,128,1)"}
2) interpolate(array, progress)
- array: Array - 一组用于线性插值的值（数字、颜色、字符串等……它们只需要是相似的数据类型）
- progress（进度）: Number - 介于0到1之间的值，其中0表示起始位置，0.5表示中间位置，1表示结束位置。
返回: 插值后的结果
示例
// an array of numbers
gsap.utils.interpolate([100, 50, 500], 0.5); // 50
gsap.utils.interpolate([100, 50, 500], 0.75); // 275
// colors
gsap.utils.interpolate(["red", "green", "blue"], 0.5); // "green"
gsap.utils.interpolate(["red", "green", "blue"], 0.25); // "rgba(128,64,0,1)"
3) interpolate(startValue, endValue)
- startValue: * - 起始值。这可以是几乎任何数据类型（数字、字符串、数组、复杂字符串、颜色、对象）
- endValue: * - 结束值。只要与startValue的数据类型一致，也几乎可以是任何数据类型
startValue
返回: 可重复使用的函数，接受一个参数——一个进度值（介于0到1之间）
如果你省略了progress（第三个）参数，该工具方法将返回一个可重复使用的函数它已经准备好根据你稍后传入的任何进度值执行插值操作。换句话说，返回的函数会记住startValue和endValuestartValue和endValue所以它可以在之后非常快速高效地执行插值计算。
示例
// get a function that will always interpolate between 0 and 100
var interp = gsap.utils.interpolate(0, 100); //notice we didn't provide a progress value
// now we can reuse the function to interpolate any values:
console.log(interp(0.5)); // 50
console.log(interp(0.25)); // 25
console.log(interp(1)); // 100
// even works for an object with multiple properties!
var interp = gsap.utils.interpolate(
{ a: 0, b: 10, c: "red" },
{ a: 100, b: 20, c: "blue" }
);
interp(0.5); // {a: 50, b: 15, c: "rgba(128,0,128,1)"}
在对对象执行动画时，如果你想让它修改原始的startValue（而不是在内部创建一个独立的对象），你可以将true作为第三个参数传入。
4) interpolate(array)
- array: Array - 一组用于线性插值的值（数字、颜色、字符串等……它们只需要是相似的数据类型）
返回: 可重复使用的函数，接受一个参数——一个进度值（介于0到1之间）
如果你省略了progress（第二个）参数时，这个工具方法将返回一个可重复使用的函数它已准备就绪，可以根据你稍后提供的任何进度值对数组进行插值。换句话说，返回的函数会记住array数组array所以它可以在之后非常快速高效地执行插值计算。
示例
// get a function that will interpolate the Array
var interp = gsap.utils.interpolate([100, 50, 500]); //notice we didn't provide a progress value
// now we can reuse the function to interpolate any values:
console.log(interp(0.5)); // 50
console.log(interp(0.75)); // 275
// even works for colors!
var interp = gsap.utils.interpolate(["red", "green", "blue"]);
interp(0.25); // "rgba(128,64,0,1)"
提示：组合使用多个可重复使用的函数实现强大的数据转换！
你可以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);
