在vue项目中使用gsap，实现极佳的2d动画效果
一、GSAP是什么？二、使用步骤1.引入库2.在vue中使用3.vue组件使用gsap完整代码总结一、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>
