GSAP入门
简单效果演示👇
来自我的掘金图床
首先创建动画
让我们首先使用一类***“box”***对 HTML 元素进行动画处理。
There are four types of tweens:
gsap.to()- 这是最常见的tween。.to()将从元素的当前状态开始，并以“到”补间中定义的值进行动画处理。 gsap.from()- 就像一个反向，它“从”补间中定义的值动画，并在元素的当前状态结束。.
gsap.fromTo() - 可以同时定义起始值和结束值。
gsap.set()- 立即设置属性（无动画）。它本质上是一个可以恢复的零持续时间补间。
gsap.to() - This is the most common type of tween. A .to() tween will start at the element’s current state and animate "to" the values defined in the tween.
gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element’s current state.
gsap.fromTo() - You define both the starting and ending values.
gsap.set() - Immediately sets properties (no animation). It’s essentially a zero-duration .to() tween which can be reverted.
入门实践
-----------------script.js----------------------
// gsap.to('.box',{duration:2,x:300})
//duration 《time持续时间》 repeat：重复多长时间； rotation:旋转。 具体见文档
//gsap.from
//{可以使用css的本身属性，类似opacity，transforms} 使用transforms比较丝滑（简化了transforms的书写方式）
gsap.set(".box", { y: 500 });
//官方建议只使用opacity，transforms（别的比较浪费性能）
gsap.to(".box", {
duration: 2,
x: 400,
rotation: 360,
border: "10px solid green",
borderRadius: "50%",
//delay:开始之前的时间
//repeat:重复次数 若为-1无限循环
//yoyo:布尔值，过去还能回来
//stagger：0.5两个不会同步
//repeatDelay：在重复的动之间的Delay
});
//本质上是操纵行内样式
let obj = { myNum: 10, myColor: "red" }; //！用处是在canvas中，通过修改position来修改canvas实现动画效果
gsap.to(obj, {
myNum: 200,
myColor: "blue",
onUpdate: () => console.log(obj.myNum, obj.myColor),
});
//!Easing (本质是由一些数学表达式所计算的) （决定动画的平滑性）
//一个ease属性不知道用什么就使用"power1.out"(万金油) 不确定就看官网
//Stagger
gsap.from(".box_s", {
duration: 2,
width: "10px",
height: "10px",
opacity: 0,
stagger: 0.3, //加了变化顺序
});
//
------------------------------------style.css-------------------------------
body {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
margin: 0px 136px;
overflow: hidden;
}
.box_s{
height: 100px;
width: 100px;
background-color:black;
display: inline-block;
}
------------------------index.html-------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
<title>GSAP</title>
</head>
<body>
<div>
<div class="box_s"></div>
<div class="box_s"></div>
<div class="box_s"></div>
<div class="box_s"></div>
</div>
</body>
<script src="./script.js"></script>
</html>
<!--
可扩展的库，基本可以让所有的元素实现动画，适配于各种框架
GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库
-->
-----------------script.js----------------------
// gsap.to('.box',{duration:2,x:300})
//duration 《time持续时间》 repeat：重复多长时间； rotation:旋转。 具体见文档
//gsap.from
//{可以使用css的本身属性，类似opacity，transforms} 使用transforms比较丝滑（简化了transforms的书写方式）
gsap.set(".box", { y: 500 });
//官方建议只使用opacity，transforms（别的比较浪费性能）
gsap.to(".box", {
duration: 2,
x: 400,
rotation: 360,
border: "10px solid green",
borderRadius: "50%",
//delay:开始之前的时间
//repeat:重复次数 若为-1无限循环
//yoyo:布尔值，过去还能回来
//stagger：0.5两个不会同步
//repeatDelay：在重复的动之间的Delay
});
//本质上是操纵行内样式
let obj = { myNum: 10, myColor: "red" }; //！用处是在canvas中，通过修改position来修改canvas实现动画效果
gsap.to(obj, {
myNum: 200,
myColor: "blue",
onUpdate: () => console.log(obj.myNum, obj.myColor),
});
//!Easing (本质是由一些数学表达式所计算的) （决定动画的平滑性）
//一个ease属性不知道用什么就使用"power1.out"(万金油) 不确定就看官网
//Stagger
gsap.from(".box_s", {
duration: 2,
width: "10px",
height: "10px",
opacity: 0,
stagger: 0.3, //加了变化顺序
});
//
------------------------------------style.css-------------------------------
body {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
margin: 0px 136px;
overflow: hidden;
}
.box_s{
height: 100px;
width: 100px;
background-color:black;
display: inline-block;
}
------------------------index.html-------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
<title>GSAP</title>
</head>
<body>
<div>
<div class="box_s"></div>
<div class="box_s"></div>
<div class="box_s"></div>
<div class="box_s"></div>
</div>
</body>
<script src="./script.js"></script>
</html>
<!--
可扩展的库，基本可以让所有的元素实现动画，适配于各种框架
GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库
-->