GSAP 时间轴

时间轴

时间轴是一种功能强大的排序工具，它充当补间和其他时间轴的容器，使将它们作为一个整体进行控制并精确管理其时间变得简单。如果没有 Timelines，构建复杂的序列将更加繁琐，因为您需要为每个动画使用延迟。例如：

// WITHOUT Timelines (only using tweens with delays):
gsap.to("#id", { x: 100, duration: 1 });
gsap.to("#id", { y: 50, duration: 1, delay: 1 }); //wait 1 second
gsap.to("#id", { opacity: 0, duration: 1, delay: 2 }); //wait 2 seconds

如果您想让第一个动画更长怎么办？此后你需要调整每一个延迟。如果你想暂停整个序列，或者重新开始它，或者动态地反向使用它，或者重复它两次呢？这可能会变得非常混乱，但 GSAP 的时间表使它变得非常简单：

//WITH Timelines (cleaner, more versatile)
var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
tl.to("#id", {x: 100, duration: 1});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});

// then we can control the whole thing easily...
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();
...

现在我们可以调整时间，而不必担心延迟的变化！增加第一个补间的持续时间，所有内容都会自动调整。

在时间轴中定位动画

默认情况下，动画会添加到时间轴的末尾，以便它们一个接一个地排序， 但你可以使用 第三个 参数来精确控制内容的放置位置。 它通常位于 动画 参数之后，并使用灵活的语法和以下选项：

let tl = gsap.timeline();

// 开始 1S之后执行
tl.to(".green", { x: 600, duration: 2 }, 1);

// 在他的前面插入
tl.to(".purple", { x: 600, duration: 1 }, "<");

// 1秒后执行
tl.to(".orange", { x: 600, duration: 1 }, "+=1");

案例

<template>
  <div>
    <div class="box black"></div>

    <div class="box red"></div>

    <div class="box blue"></div>

    <div class="box green"></div>
  </div>
</template>

<script setup>
  /* eslint-disable */
  import gsap from "gsap";
  import { onMounted, ref } from "vue";

  const gsap1 = () => {
    const tl = gsap.timeline();

    // 1秒后执行
    tl.to(".black", { x: 600, duration: 2 }, 1);

    // 插入 在第一个前面
    tl.to(".red", { x: 600, duration: 1 }, "<");

    // 1S 之后插入
    tl.to(".blue", { x: 600, duration: 1 }, "+=1");

    // 最后一步
    tl.to(".green", { x: 600, duration: 1 });
  };

  onMounted(() => {
    gsap1();
  });
</script>

<style lang="scss" scoped>
  .box {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
  }
  .red {
    background-color: red;
  }
  .black {
    background-color: black;
  }
  .blue {
    background-color: blue;
  }
  .green {
    background-color: green;
  }
</style>

最常用的位置参数

// 1. 以时间轴开始测量的绝对时间

tl.to(".box", { x: 100, duration: 1 }, 1); // 1秒后开始

// 2. 相对于时间轴中前一个动画的相对时间

tl.to(".box", { x: 100, duration: 1 }, "<"); // 在前一个动画之前开始

// 3. 相对于时间轴中前一个动画的相对时间，但加上一个额外的延迟

tl.to(".box", { x: 100, duration: 1 }, "<0.5"); // 在前一个动画之前开始，但延迟0.5秒

// 4. 相对于时间轴中前一个动画的相对时间，但加上一个额外的延迟

tl.to(".box", { x: 100, duration: 1 }, "+=1"); // 在前一个动画之后开始，但延迟1秒

时间分割点

我们可以在时间轴上面插入分割点，然后通过时间轴的 progress 属性来控制动画的播放进度。

语法

const t1 = gsap.timeline();
t1.to("#box", { x: 400, duration: 1 })
  /*两秒后插入一个节点 */
  .add("myLabel", 2)
  /* 在这个事件节点后面1秒后 */
  .to("#box2", { x: 400, duration: 1 }, "myLabel+=1")
  /* 在这个时间节点前面1秒前 */
  .to("#box3", { x: 400, duration: 1 }, "myLabel-=1");

时间轴统一设置

时间轴统一设置

不同时间线中的动画可能会有相同的特殊属性，比如 repeat 和 delay 等，我们可以在时间线的创建函数中统一设置，避免重复：

const tl = gsap.timeline({ repeat: 1, repeatDelay: 1, yoyo: true });
tl.to(".green", { rotation: 360 })
  .to(".purple", { rotation: 360 })
  .to(".orange", { rotation: 360 });

属性扩充

如果你发现某个属性你重复使用了很多次，比如 x、scale、duration 等，我们就可以使用 defaults 属性，任何加到 defaults 属性中的参数都会被下面的函数继承。

const tl = gsap.timeline({
  defaults: {
    scale: 1.2,
    duration: 2,
  },
});
tl.to(".green", {
  x: 200,
})
  .to(".purple", {
    x: 400,
  })
  .to(".orange", {
    x: 600,
  });

时间轴回调函数

在有些情况下，我们需要对动画的开始、过程、结束的某个时间点进行回调操作，gsap 提供了以下回调函数：

• onComplete：动画完成时。

• onStart：动画开始时

• onUpdate：动画更新时。

• onRepeat：动画重复时。

• onReverseComplete：当动画在反转到达开始时

gsap.to(".class", {
  x: 100,
  onComplete: () => console.log("the tween is complete")
}

// 时间线所有动画结束时调用
gsap.timeline({onComplete: tlComplete});

function tlComplete() {
  console.log("the tl is complete");
  // ...
}