Vue项目如何利用GreenSock动画库实现动画效果

GreenSock动画库是一个功能强大的JavaScript动画库，可以帮助我们制作复杂的、有创意的网页动画。包括Tweening、Timelining和Sequencing。它还提供了一些高级功能，如SVG动画，物理引擎和滚动动画。

安装GreenSock动画库

npm install gsap

导入GreenSock动画库

import { gsap } from 'gsap'

Sequencing的用法

//使用顺序执行
<template>
  <div class="boxes">
    <div class="box" ref="box1"></div>
    <div class="box" ref="box2"></div>
    <div class="box" ref="box3"></div>
  </div>
</template>
 
<script>
import { gsap } from 'gsap'
 
export default {
  mounted() {
    gsap.from(this.$refs.box1, { 
      duration: 1,
      x: -200,
      opacity: 0
    });
    gsap.from(this.$refs.box2, { 
      duration: 1,
      delay: 0.5,
      x: -200,
      opacity: 0
    });
    gsap.from(this.$refs.box3, { 
      duration: 1,
      delay: 1,
      x: -200,
      opacity: 0
    });
  }
}
</script>

Tweening的用法

//添加平滑的过渡效果
<template>
  <div class="box" ref="box"></div>
</template>
 
<script>
import { gsap } from 'gsap'
 
export default {
  mounted() {
    gsap.to(this.$refs.box, { 
      duration: 3,
      backgroundColor: 'red'
    });
  }
}
</script>

Timelining的用法

//创建交互式动画序列
<template>
  <div class="box" @click="startAnimation" ref="box"></div>
</template>
 
<script>
import { gsap, TimelineMax } from 'gsap'
 
export default {
  methods: {
    startAnimation() {
      const tl = new TimelineMax();
 
      tl.to(this.$refs.box, { 
        duration: 1,
        x: '+=100',
        y: '+=50'
      })
      .to(this.$refs.box, { 
        duration: 1,
        rotation: '+=360',
        scale: 2
      })
      .to(this.$refs.box, { 
        duration: 1,
        opacity: 0,
        onComplete: () => alert('Animation completed!')
      });
    }
  }
}
</script>