跳过主要内容

分步骤调用函数逐步构建时间轴

或许你不能预先构建整个时间轴，因为你需要以顺序的方式调用各个函数。或许每个函数都会改变元素的状态，产生一个必须在下一步（函数）调用之前完成的动画。这个辅助函数可以让你非常轻松地将代码组织成传递的一系列简单参数，并且你甚至可以在每一步之间设置延迟：

function progressiveBuild() {
  let data = Array.from(arguments),
    i = 0,
    tl = gsap.timeline({
      onComplete: function () {
        let isNum = typeof data[i] === "number",
          delay = isNum ? data[i++] : 0,
          func = data[i++];
        typeof func === "function" && tl.add(func(), "+=" + delay);
      },
    });
  tl.vars.onComplete();
  return tl;
}

用法

progressiveBuild(
  step1,
  step2,
  1.5, // 1.5-second delay (sprinkle between any two functions)
  step3
);

目录

用法