GSAP 控制方法

// store the tween or timeline in a variable
let tween = gsap.to("#logo", { duration: 1, x: 100 });

//pause 暂停
tween.pause();

//继续
tween.resume();

//反转
tween.reverse();

//跳跃到0.5秒
tween.seek(0.5);

//跳跃到进度25%
tween.progress(0.25);

//时间缩短一半
tween.timeScale(0.5);

//时间放大1倍
tween.timeScale(2);

//立即停止 并且当垃圾回收,play restart 都不管用
tween.kill();

// 连缀使用
tween.timeScale(2).reverse();

回调方法

onComplete
onStart
onUpdate
onRepeat
onReverseComplete

html

<template>
  <div class="page">
    <div class="gsapbox1" ref="gsapbox1">{{ message }}</div>
    <button @click="pause">点击暂停</button>
    <button @click="start">点击继续</button>
    <button @click="restart">点击重新开始</button>
    <button @click="stop">点击停止</button>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";

  import { gsap } from "gsap";

  const message = ref("首页");

  const gsapbox1 = ref(null);

  const tween = ref(null);

  // 停止 点击了停止 就再不会有继续开启了
  const stop = () => {
    tween.value.kill();
  };

  // 暂停
  const pause = () => {
    tween.value.pause();
  };

  // 开始
  const start = () => {
    console.log(tween.value);
    tween.value.play(0.9);
  };

  // 重新开始
  const restart = () => {
    console.log(tween.value);
    // 重新开始
    tween.value.restart();
  };

  onMounted(() => {
    console.log("开始吧");
    // 运动开始
    gsapbox1move();
  });

  // gsapbox1运动
  const gsapbox1move = () => {
    tween.value = gsap.to(gsapbox1.value, {
      x: "+=200",
      duration: 1,
      background: "blue",
      repeat: -1, // 重复次数
      yoyo: true, // 反向运动
      onComplete: () => {
        console.log("动画完成了");
      },
      onStart: () => {
        console.log("动画开始了");
        tween.value.progress(0.5); // 设置动画的开始进度
      },
      onUpdate: () => {
        // 获取动画的进度
        console.log(tween.value.progress() * 100);
      },
      onRepeat: () => {
        console.log("动画重复了");
      },
    });
  };
</script>

<style lang="scss" scoped>
  .page {
    .gsapbox1 {
      width: 100px;
      height: 100px;
      background: red;
    }
  }
</style>

GSAP 控制方法 ​

回调方法 ​

GSAP 控制方法

回调方法