非常强大的gsap动画

非常好用的动画库gsap

为啥要使用gsap

1. 非常方便的语法比如下面例子（简单吧）

// 让 div 容器在一秒内水平移动 100 px to 去到哪
gasp.to('.item', { duration: 1, x: 100 }) // duration动画持续的时间
// from很好理解就是来自哪 

gsap.from('.item', { duration: 1, x: 100});

gsap.fromTo('.item', // 这个就是从哪到哪好理解吧
  {
    opacity: 0,
  },
  {
    opacity: 0.8,
    duration: 1,
    ease: "elastic", // 动画曲线
  },
);

2.涵盖面广不同于一般的动画库这个动画库几乎能操作你能想到的大多元素（特别的健全）比如： 3D模型（可以看我的另一篇文章threejs就是那gsap来操作3D模型）、svg 、画布、css属性 ……

3.兼容性好因为它是js动画几乎能解决大多数浏览器兼容性

4.非常的灵活几乎可以处理所有页面上可以通过JS进行改变的元素对对于动画的操控可以非常高程度的自定义

5.非常好用的线性动画（你还记得苹果官网或者各大手机厂商的官网产品那种炫技的网站根据滚轮来完成动画的每一帧的变化特别的酷炫）自己做过该线性动画知道这种每一帧都由滚轮触发有多不好　　做 ,但是gsap帮你封装好了直接用就好了（具体代码看下面案例）

6.速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果

7.轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。

8..这个库是真的推荐花事件去好好看看文档的

基本使用

1. 下载npm install gsap

案例1切换组件的时候进行动画切换(下面可以是v-if 你可以换成路由切换啥的 )

<template>
  <div>
    <button @click="flag = !flag">点击切换</button>
   // transition除了常见的class类写法还要函数写法 @enter  进入  @befor-enter 进入之前 @after-enter 进入之后  
   // @leave离开的时候 当然也有 离开后 离开前 
    <transition  @enter="enterHandle"  appear>
      <div v-if="flag" class="box">11</div>
      <div v-else class="box2">222</div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// 引入
import { gsap } from "gsap";
const flag = ref<boolean>(true)

const enterHandle = (el: Element): void => {
  console.log('我在进来的时候触发');
  gsap.fromTo(el, { // 就是在进入的时候从小变大
    height: '0px',
    width: '0px'
  }, {
    height: '200px',
    width: '200px'
  })
}

</script>

<style scoped>
.box,
.box2 {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box2 {
  background-color: skyblue;
}
</style>

案例2 滚动页面触发线性动画

1.引入

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

2.把滚动插件引入到gsap动画中

gsap.registerPlugin(ScrollTrigger)

3.然后你就可以定义动画了

 // 从哪来的
    gsap.from('.newsRight', {
      // 页面滚动开始触发
      scrollTrigger: {
        // 目标
        trigger: ".newsRight",
        // 开始位置 
        // start: "top center",
        // 结束位置
        // 定住锚点位置
        pin: ".box",
        // end: "top 100px",
        // 这个就是根据页面滚动而触发动画
        scrub: true, // 0.5, 以秒计算
        // 是否展示开始结束位置
        // markers: true
      },
      duration: 2,
      x: 300,
    });

4.甚至你可以定义多个元素的线性动画

 gsap.from('.tasks', {
        // // 页面滚动开始触发
        scrollTrigger: {
          //   // 目标
          start: "top 100",
          trigger: ".tasks",
          pin: ".task-container",
          scrub: true, // 0.5, 以秒计算
        },
        duration: 5,
        // opacity: 0,
        y: (index, target) => {
          return index % 2 ? -310 : 1 // 自己瞎写的想要怎么动可以自己算一下 我这个盒子刚好能凑一块
        },
        x: (index, target) => {
          return index < 4 ? 294 : -294 // 我这个刚好能把几个盒子怼在一起 大家想玩玩其他的可以自己算算
        },
      });

还能定义一些高级事件

let tl = gsap.timeline({
    // 添加到整个时间线 
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // 在执行时固定触发器元素
      start: "top top", // 当触发器的顶部碰到视口的顶部时
      end: "+=500", // 在滚动 500 px后结束
      scrub: 1, // 触发器1秒后跟上滚动条
      snap: {
        snapTo: "labels", // 捕捉时间线中最近的标签
        duration: {min: 0.2, max: 3}, // 捕捉动画应至少为 0.2 秒，但不超过 3 秒（由速度决定） 
        delay: 0.2, // 从上次滚动事件开始等待 0.2 秒，然后再进行捕捉 
        ease: "power1.inOut" // 捕捉动画的过度时间（默认为“power3”） 
      }
    }
  });
// 向时间线添加动画和标签 
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");