Gsap的简单使用

Gsap 使用

1. 安装 GSAP

首先，你需要在项目中安装 GSAP。你可以使用 npm 来安装：

npm install gsap

2. 在 Vue 中使用 GSAP

在 Vue 组件中，你可以通过 onmounted 钩子来执行动画，因为此时 DOM 已经渲染完毕。
也可以通过一些函数进行使用

简单示例

下面是一个使用 GSAP 实现元素移动动画的示例：

<script setup>
import { gsap } from "gsap";

 function animateBox() {
      // 让盒子向右移动 300 像素
      // gsap.to(".box", { 
      //    duration: 2,             // 动画持续时间
      //   //  x: 200,                 //x轴移动距离
      //    rotation: 360,         // 旋转角度
      //   //  repeat:2,              // 重复次数
      //   //  yoyo: true,            // 往复运动
      //   //  delay: 1,                // 延迟1秒
      //   ease:"bounce.out"        // 弹跳效果
      //   });
          gsap.to(".box", {
            duration: 1,
            rotation: 360,
            opacity: 1, 
            delay: 0.5, 
            stagger: 0.2,
            ease: "sine.out", 
            force3D: true
          });

          document.querySelectorAll(".box").forEach(function(box) {
          box.addEventListener("click", function() {
          gsap.to(".box", {
          duration: 0.5, 
          opacity: 0, 
          y: -100, 
          stagger: 0.1,
          ease: "back.in",
          delay:0.5
          });
          });
          });
    }
</script>

<template>
  <div class="main">
    <div class="cuton-box">
      <div class="box-list">
        <div  class="box pink"></div>
        <div  class="box blue"></div>
        <div  class="box green"></div>
        <div  class="box orange"></div>
      </div>
      
    </div>
    <button @click="animateBox">Animate Box</button>

  </div>
</template>

<style lang="scss">
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .cuton-box {
    width: 60%;
    height: 60%;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .box-list{
      display: flex;
      width: 100%;
      justify-content: center;
      .box{
        width: 100px;
        height: 100px;
        border-radius: 5%;
        margin: 3%;
  
      }
      .pink {
        background-color: pink;
      }
      .blue {
        background-color: blue;
      }
      
      .green {
        background-color: green;
      }
      .orange {
        background-color: orange;
      }
    }
    
  }
  button{
    margin-top: 30px;
  }
}



</style>