栗子🌰
先举一个简单的例子
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
overflow: hidden;
}
.box {
display: block;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
</head>
<body>
<div class="box w-50 h-50 bg-green-400"></div>
</body>
<script>
gsap.to(".box", {
duration: 0.8,
x: 100,
y: 100,
rotation: 360,
scale: 1.5,
backgroundColor: "blue",
ease: "power1.inOut",
repeat: -1,
yoyo: true,
onStart: function() {
console.log("Animation started");
},
onComplete: function() {
console.log("Animation completed");
},
onRepeat: function() {
console.log("Animation repeated");
}
});
</script>
</html>看得出来，是一种声明式的动画方案，通过method+target＋vars实现，并允许带有回调函数进行处理。
当然了，这里还是用js主线程控制的，你在js后面加一个while(true)试试🤣。
Method
gsap.to(target, {})gsap.from(target,{})gsap.fromTo(target,{},{})gsap.set(target,{})Immediately sets properties (no animation). It's essentially a zero-duration .to() tween.
Target
- CSS选择器字符串
- 对象
- HTMLElement变量（本质也是对象）
- 其它对象（可用于canvas绘制）
- 一组对象
javascript
// use a class or ID
gsap.to(".box", { x: 200 });
// a complex CSS selector
gsap.to("section > .box", { x: 200 });
// a variable
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })
// or even an Array of elements
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
gsap.to([square, circle], { x: 200 })一个控制canvas的案例
javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#28a92b";
let position = { x: 0, y: 0 };
function draw() {
// erase the canvas
ctx.clearRect(0, 0, 300, 300);
// redraw the square at it's new position
ctx.fillRect(position.x, position.y, 100, 100);
}
//animate x and y of point
gsap.to(position, {
x: 200,
y: 200,
duration: 4,
// unlike DOM elements, canvas needs to be redrawn and cleared on every tick
onUpdate: draw
});Transform shorthand
一些属性相当于Css的Transform的简写
Here's a list of the shorthand transforms and some other commonly used properties.
| GSAP**** | Description or equivalent CSS |
|---|---|
| x: 100 | transform: translateX(100px) |
| y: 100 | transform: translateY(100px) |
| xPercent: 50 | transform: translateX(50%) |
| yPercent: 50 | transform: translateY(50%) |
| scale: 2 | transform: scale(2) |
| scaleX: 2 | transform: scaleX(2) |
| scaleY: 2 | transform: scaleY(2) |
| rotation: 90 | transform: rotate(90deg) |
| rotation: "1.25rad" | Using Radians - no CSS alternative |
| skew: 30 | transform: skew(30deg) |
| skewX: 30 | transform: skewX(30deg) |
| skewY: "1.23rad" | Using Radians - no CSS alternative |
| transformOrigin: "center 40%" | transform-origin: center 40% |
| opacity: 0 | adjust the elements opacity |
| autoAlpha: 0 | shorthand for opacity & visibility |
| duration: 1 | animation-duration: 1s |
| repeat: -1 | animation-iteration-count: infinite |
| repeat: 2 | animation-iteration-count: 2 |
| delay: 2 | animation-delay: 2 |
| yoyo: true | animation-direction: alternate |
其中一些比较典型的特殊的属性：
| + + | |
默认使用px和°作为单位，不过也允许以下方式灵活定义
javascript
x: 200, // 默认200px
x: "+=200" // 设置相对偏移值
x: '40vw', // 使用vw单位
x: () => window.innerWidth / 2, // 用函数计算
rotation: 360 // 默认为degree
rotation: "1.25rad" // use radians尽管GSAP可以几乎对所有的CSS属性进行动画处理，但我们建议尽可能只使用GSAP的变换（transforms）和不透明度（opacity）的动画功能。像filter和boxShadow这样的属性对于浏览器来说渲染起来非常耗费CPU（因为会拖延浏览器的JS主线程）。所以请谨慎地进行动画处理，并确保在低端设备上进行测试。