跳过主要内容

trackDirection

需要一个onReverse()方法吗？跟踪任何动画的播放头方向​

如果你发现自己需要一个不存在的onReverse()回调函数，或者需要一种方式来在播放头改变方向时收到通知，那么这个辅助函数将非常有用。它的特别之处在于无论动画嵌套多深都能正常工作。请注意，父级或父级的父级可能会被反向播放，或者具有负的时间比例，这会直接影响播放头穿过子元素的方式。

function trackDirection(value) {
  typeof value !== "object" && (value = { onUpdate: value });
  let prevTime = 0,
    prevReversed = false,
    anim = value.eventCallback ? value : value.animation,
    onUpdate = value.onUpdate,
    onToggle = value.onToggle;
  return anim
    ? anim.eventCallback(
        "onUpdate",
        trackDirection({ onUpdate: onUpdate, onToggle: onToggle })
      )
    : function () {
        let time = this.totalTime(),
          reversed = time < prevTime;
        this.direction = reversed ? -1 : 1;
        if (reversed !== prevReversed) {
          onToggle && onToggle.call(this, this.direction);
          prevReversed = reversed;
        }
        prevTime = time;
        onUpdate && onUpdate.call(this, this.direction);
      };
}

用法​

可以从以下选项中进行选择：

  1. 直接作为回调函数使用（它返回一个函数）：
    gsap.to(... {onUpdate: trackDirection(), ...})
  2. 分配给动画：
    let tl = gsap.timeline();
    trackDirection(tl);

您可以添加配置选项（onToggle 和/或 onUpdate）：

gsap.to(
  ...{
    x: 100,
    onUpdate: trackDirection({
      onToggle: (direction) => console.log("toggled direction to", direction),
      onUpdate: (direction) => console.log("updated animation"),
    }),
  }
);

或者当分配给动画时：

trackDirection({
  animation: tl,
  onToggle: (direction) => console.log("toggled direction to", direction),
  onUpdate: (direction) => console.log("updated animation"),
});
警告

由于“direction”是在播放头改变位置时设置的，因此它不会立即更新。例如，如果你调用tween.reverse()然后立刻检查（在下一个tick之前），tween.direction仍然会报告为1，因为播放头尚未移动。

演示​

加载中...

目录