在vue项目中使用gsap，实现极佳的2d动画效果

一、GSAP是什么？

GSAP全称是GreenSock Animation Platform，是一个js动画框架
1、速度快。GSAP专门优化了动画性能，使之实现和css一样的高性能动画效果。
2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
3、没有依赖。
4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。
5、任何对象都可以实现动画。

二、使用步骤

1.引入库

代码如下（示例）：

npm install gsap --save

2.在vue中使用

代码如下（示例）：

import { TweenMax, gsap } from "gsap";

3.vue组件使用gsap完整代码

代码如下（示例）：

<template>
  <div id="home">
    <div class="container">
      <div class="loader-wrapper">
        <div class="loader-1"></div>
        <div class="loader-2"></div>
        <div class="loader-3"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { TweenMax, gsap } from "gsap";
import headerNav from "../../components/headerNav";
export default {
  name: "home",
  components: { headerNav },
  data() {
    return {};
  },
  mounted() {
    this.loadding();
  },
  methods: {
    loadding() {
      const loader = gsap.timeline();
      const duration = 0.25;
      const delay = 1;
      loader
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", {
          rotate: 90,
          transformOrigin: "45px 45px",
          marginLeft: 0,
        })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { transformOrigin: "72px 17px", rotate: 270 })
        .to(".loader-2", duration, { width: 35 })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "45px 17.5px", rotate: 180 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", {
          transformOrigin: "45px 45px",
          rotate: 270,
          marginTop: 0,
        })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-3", { transformOrigin: "17.5px 17.5px", rotate: 90 })
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", { transformOrigin: "45px 45px", rotate: 180 })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { transformOrigin: "bottom center", marginTop: 20 })
        .to(".loader-2", duration, { width: 35 })
        .set(".loader-1", { transformOrigin: "45px 45px", rotate: 90 })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "72px 17.5px", rotate: 270 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", { rotate: 360 })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-3", { transformOrigin: "45px 17.5px", rotate: 180 })
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", {
          transformOrigin: "45px 45px",
          rotate: 270,
          marginTop: 0,
        })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { transformOrigin: "17.5px 17.5px", rotate: 90 })
        .to(".loader-2", duration, { width: 35 })
        .set(".loader-1", { transformOrigin: "45px 45px", rotate: 180 })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "bottom center", marginTop: 20 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", { transformOrigin: "45px 45px", rotate: 90 })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-3", { transformOrigin: "72px 17.5px", rotate: 270 })
        .to(".loader-3", duration, { width: 35 })
        .set(".loader-2", { transformOrigin: "45px 17.5px", rotate: 0 })
        .to(".loader-2", duration, { width: 90 })
        .set(".loader-2", { rotate: 180 })
        .to(".loader-2", duration, { width: 35 })
        .set(".loader-1", {
          transformOrigin: "45px 45px",
          rotate: 270,
          marginTop: 0,
        })
        .to(".loader-1", duration, { width: 90 })
        .set(".loader-1", { transformOrigin: "17.5px 17.5px", rotate: 90 })
        .to(".loader-1", duration, { width: 35 })
        .set(".loader-3", {
          transformOrigin: "45px 17.5px",
          rotate: 180,
          marginTop: 55,
        })
        .to(".loader-3", duration, { width: 90 })
        .set(".loader-2", { marginLeft: 55 })
        .delay(delay)
        .repeat(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
/* Colors */
$background: #f6cb4f;
$theme-black: #0d0d0d;

/* Dimensions */
$loader-wrapper-width: 90px;
$loader-width: 35px;
$loader-height: 35px;
%center {
  display: flex;
  justify-content: center;
  align-items: center;
}
%loader {
  position: absolute;
  width: $loader-width;
  height: $loader-height;
  border: 10px solid $theme-black;
  border-radius: 40px;
}
#home {
  height: 100%;
  width: 100%;

  /* Specific Styles */
  .container {
    @extend %center;
    height: 100vh;
  }
  .loader-wrapper {
    display: flex;
    position: absolute;
    top: calc(50% - calc(#{$loader-wrapper-width} / 2));
    left: calc(50% - calc(#{$loader-wrapper-width} / 2));
    width: $loader-wrapper-width;
  }
  .loader-1 {
    @extend %loader;
  }
  .loader-2 {
    @extend %loader;
    margin-left: 55px;
  }
  .loader-3 {
    @extend %loader;
    width: $loader-wrapper-width;
    margin-top: 55px;
  }
}
</style>

总结

good afternoon