非常强大的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");
强烈 推荐去官网看看那些官网的demo才能体会到这个库的强大
如果你近期想要做一个炫技网站 记得这个库 绝对值
