GSAP基础知识

安装

1. CDN

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

2. npm

npm install gsap

使用

gsap.to(".box", {x: 200})

说明：

to 方法

.box 类名

x 水平方向移动的距离

有哪些方法

1. gsap.to()——这是一种最常用的tween动画，就是让元素从初始状态变化到目标状态
2. gsap.from()——有点像to方法的逆向变化，就是让元素从目标状态变化到初始状态。
3. gsap.fromTo()——需要自己定义两个状态的数据，然后从前一个变化到后一个。
4. gsap.set()——直接设置成想要的状态，没有任何过度与动画效果。本质上就是duration为0的 .to 方法

常用属性

Timelines时间线

时间线能让我们创建非常容易调节的、很灵活的顺序动画效果。下面就是一个简单的包含着三个tween动画的timeline实例效果。默认情况下，这些动画是依次添加的，他们在变化的时候也是依次执行，而且是一个执行完之后再下一个执行。

// 创建一个Timeline类型的实例
let tl = gsap.timeline()

// 把tween动画添加到timeline实例上，注意我们在用的是tl.to 而不是gsap.to
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

调整执行时间点

let tl = gsap.timeline()

// 绿色方块会在整个时间线开始1秒后进行移动
tl.to(".green", { x: 600, duration: 2 }, 1);

// 紫色方块会和之前一个添加的动画同时开始运动
tl.to(".purple", { x: 600, duration: 1 }, "<");

// 橘色方块会在之前所有动画都结束一秒后再开始运动
tl.to(".orange", { x: 600, duration: 1 }, "+=1");

特殊属性 Special Properties

Timelines可以设置的动画属性和tween动画绝大部分是一样的，比如像repeat和delay，可以让你轻松的设定整个顺序动画的动画属性

let tl = gsap.timeline({repeat: -1, repeatDelay: 1, yoyo: true})

tl.to(".green", { rotation: 360 });
tl.to(".purple", { rotation: 360 });
tl.to(".orange", { rotation: 360 });

时间线的默认设置

如果你发现自己总是一遍又一遍的写同一个属性，那么你可以使用 defaults来进行设置。任何添加到时间线上的defaults的属性，都会被添加到这个时间线上的tween动画继承，像是通过to(),from()和fromTo()方式添加到时间线上的动画效果都是有这个继承效果的。利用这个方式可以让你的代码更简洁一些。

var tl = gsap.timeline({ defaults: { duration: 1 } });

//这样每个动画都是1秒的时长，不用重复写了
tl.to(".color1", { x: 200 })
tl.to(".color2", { x: 200, scale: 0.2 })
tl.to(".color3", { x: 200, scale: 2, y: 20 });

控制动画

通过一个变量保存对Tween或者Timeline实例的引用

let tween = gsap.to(".color1", { duration: 10, x: 700 });

暂停动画：tween.pause()

继续动画：tween.resume()

反向变化：tween.reverse()

切换至动画1s时候的状态：tween.seek(1)

切换至动画1/4时候的状态：tween.progress(1/4)

让动画速度变为原来的0.5倍：tween.timeScale(0.5)

销毁tween实例：tween.kill()

动画事件

onStart：动画开始时触发

gsap.to(".color1", {x:300,duration:3,onStart:event})

function event(){
    console.log('触发')
}

onComplete：动画结束时触发

onUpdate：只要动画运行，每一帧都会触发（元素有属性变化时）

onRepeat：每次动画重复时触发

onReverseComplete：当动画反向执行后运动到变化起始点时触发