gsap动画库的实践

先看效果：

gsap动画库

安装插件：npm install gsap

<template>
  <div>
    <h1 style="text-align: left">gsap的用法</h1>
    <h1 style="text-align: left">https://gsap.com/resources/get-started</h1>
    <div>
      <div style="width: 600px; border: 1px solid red; border-radius: 100px">
        <div class="circle"></div>
      </div>
      <div style="text-align: left; margin-top: 10px">
        <el-button type="primary" @click="to_fn" round> 动起来 to </el-button>
        <el-button type="primary" @click="from_fn" round>
          动起来 from
        </el-button>
        <el-button type="primary" @click="fromTo_fn" round>
          动起来 fromTo
        </el-button>
        <el-button type="primary" @click="set_fn" round> 动起来 set </el-button>
        <el-button type="primary" @click="reset" round> 复位 </el-button>
      </div>
    </div>
    <div
      style="
        width: 40%;
        height: 25vh;
        border: 1px solid red;
        margin-top: 10px;
        font-size: 30px;
        font-weight: 600;
        color: black;
      "
    >
      <div
        style="
          border: 1px solid blue;
          padding: 0 10px;
          height: 50%;
          width: calc(100% - 20px);
          display: flex;
          justify-content: space-between;
          align-items: center;
          overflow: hidden;
        "
      >
        <div
          class="room_all"
          style="
            height: calc(100% - 20px);
            width: calc(50% - 20px);
            border: 2px solid skyblue;
            transform: translateY(-110%);
          "
        >
          房间总数
        </div>
        <div
          class="room_all"
          style="
            height: calc(100% - 20px);
            width: calc(50% - 20px);
            border: 2px solid skyblue;
            transform: translateY(-110%);
          "
        >
          自住
        </div>
      </div>
      <div
        style="
          border: 1px solid blue;
          padding: 0 10px;
          height: 50%;
          width: calc(100% - 20px);
          display: flex;
          justify-content: space-between;
          align-items: center;
          overflow: hidden;
        "
      >
        <div
          class="room_3"
          style="
            height: calc(100% - 20px);
            width: calc(50% - 20px);
            border: 2px solid #e21665;
            transform: translateX(-110%);
          "
        >
          出租
        </div>
        <div
          class="room_4"
          style="
            height: calc(100% - 20px);
            width: calc(50% - 20px);
            border: 2px solid #930fa0;
            transform: translateX(110%);
          "
        >
          空置
        </div>
      </div>
    </div>
    <div style="text-align: left; margin-top: 10px">
      <el-button type="primary" @click="move" round> 动起来 </el-button>
      <el-button type="primary" @click="reset_move" round> 复原 </el-button>
    </div>
    <div style="border: 1px solid orange; margin-top: 10px">
      <div
        class="green"
        style="
          width: 100px;
          height: 100px;
          border-radius: 30%;
          border: 2px solid #ef9cbc;
        "
      >我撞</div>
      <div
        class="red2"
        style="
          width: 100px;
          height: 100px;
          border-radius: 30%;
          border: 2px solid #0fee55;
        "
      >我猛撞</div>
      <div
        class="blue"
        style="
          width: 100px;
          height: 100px;
          border-radius: 30%;
          border: 2px solid #e926f8;
        "
      >我使劲撞</div>
    </div>

    <div style="text-align: left; margin-top: 10px">
      <el-button type="primary" @click="timeline" round> 时间线 </el-button>
      <el-button type="primary" @click="reset_timeline" round> 复原 </el-button>
    </div>
  </div>
</template>
<script>
import { gsap } from "gsap";
export default {
  data() {
    return {};
  },
  watch: {},
  created() {},
  mounted() {
    // create a timeline
    // add the tweens to the timeline - Note we're using tl.to not gsap.to
  },
  methods: {
    reset_timeline() {
      let tl = gsap.timeline();
      tl.to(".green", { x: 0, duration: 2, rotation: 0 });
      tl.to(".red2", { x: 0, duration: 1, rotation: 0 });
      tl.to(".blue", { x: 0, duration: 0.5, rotation: 0 });
    },
    timeline() {
      let tl = gsap.timeline();
      tl.to(".green", { x: 500, duration: 2, rotation: 360,repeat: -1,yoyo: true, delay: 1.5, });
      tl.to(".red2", { x: 500, duration: 1, rotation: 360,repeat: -1,yoyo: true,delay: 1.5, });
      tl.to(".blue", { x: 500, duration: 0.5, rotation: 360,repeat: -1,yoyo: true,delay: 1.5, });
    },
    move() {
      gsap.to(".room_all", {
        yPercent: 110,
        duration: 1, // duration（动画时长）
        delay: 1, // 延时
        // stagger: 1, // 每个动画之间的时间
        repeat: -1, // 循环次数，-1 无限次；
        yoyo: true, //悠悠球，往复运动，配合repeat=-1使用
      });
      gsap.to(".room_3", {
        xPercent: 110,
        duration: 1, // duration（动画时长）
        delay: 1, // 延时
        repeat: -1, // 循环次数，-1 无限次；
        yoyo: true, //悠悠球，往复运动，配合repeat=-1使用
        stagger: 1, // 每个动画之间的时间
        // ease: "bounce.out", // 速度变化率  "power1.in"   "power1.out"  "power1.inOut"
      });
      gsap.to(".room_4", {
        xPercent: -110,
        duration: 1, // duration（动画时长）
        delay: 1, // 延时
        repeat: -1, // 循环次数，-1 无限次；
        yoyo: true, //悠悠球，往复运动，配合repeat=-1使用
        stagger: 1, // 每个动画之间的时间
        // ease: "bounce.out", // 速度变化率
      });
    },
    reset_move() {
      gsap.to(".room_all", {
        yPercent: 0,
        duration: 0.5, // duration（动画时长）
      });
      gsap.to(".room_3", {
        xPercent: -110,
        duration: 1, // duration（动画时长）
      });
      gsap.to(".room_4", {
        xPercent: 110,
        duration: 1, // duration（动画时长）
      });
    },
    to_fn() {
      gsap.to(".circle", {
        x: 500, // x 坐标设置
        scale: 0.6, // 缩放
        skewY: 30, // 倾斜 30，skewX，skewY
        opacity: 1, // 透明度
        repeat: -1, // 循环次数，-1 无限次；
        backgroundColor: "#8d3dae", // 背景色设置
        rotation: 330, //  rotation: 旋转角度
        duration: 3, // duration（动画时长）
        delay: 1, // 延时
        yoyo: true, //悠悠球，往复运动，配合repeat=-1使用
      });
    },
    from_fn() {
      gsap.from(".circle", { x: 300 });
    },
    fromTo_fn() {
      gsap.fromTo(".circle", { x: 400 }, { x: 200 });
    },
    set_fn() {
      gsap.set(".circle", { x: 100 });
    },
    reset() {
      gsap.to(".circle", {
        x: 0,
        rotation: 0,
        skewY: 0, // 倾斜 30，skewX，skewY
        opacity: 1, // 透明度
        scale: 1,
      });
    },
  },
};
</script>
<style lang='less' scoped>
.circle {
  width: 100px;
  height: 100px;
  // border:2px solid blue;
  background: linear-gradient(to bottom, #f30de7, #fa7e4a);
  border-radius: 30%;
}
</style>