跳过主要内容

pipe

返回值:函数


pipe()基本上是将多个函数调用串联在一起,把前一个函数的返回结果传递给下一个函数。无需手动将一个函数的返回值传递给下一个函数的参数,pipe()可以为你自动完成这一过程。例如:

// without pipe()
var value1 = func1(input);
var value2 = func2(value1);
var output = func3(value2);

// or multi-level wrapping (awkward)
var output = func1(func2(func3(input)));

// cleaner with pipe()
var transfrom = gsap.utils.pipe(func1, func2, func3);
var output = transform(input);

参数

传递任意多个函数按你的需求传入pipe()它们将会按照顺序依次被调用,每个函数的返回值会自动传递给下一个函数。

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

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

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

// then map to the corresponding position on the width of the screen
gsap.utils.mapRange(0, 100, 0, window.innerWidth),

// then snap to the closest increment of 20
gsap.utils.snap(20)
);

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

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

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗