非常强大的gsap动画

非常好用的动画库gsap 

官网 https://greensock.com/

为啥要使用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");

强烈 推荐去官网看看那些官网的demo才能体会到这个库的强大 

如果你近期想要做一个炫技网站 记得这个库 绝对值

 

posted @ 2023-02-03 09:57  乔木滴滴  阅读(1764)  评论(0)    收藏  举报