介绍
GSAP使用户记录 主要服务于three.js
# 了解gsap
- 不是很了解...
- 通过
npm
进行安装即可
npm i gsap
- 查看动画赛贝尔曲线 (opens new window), 用来设置
ease
动画执行效果属性
# gsap属性和API
gsap中所有有关时间的单位都是秒
# gsap属性
属性名 | 属性作用 | 类型 | 默认值 |
---|---|---|---|
duration | 设置动画的进行时间 | 属性 | 0.5 |
ease (opens new window) | 设置动画的执行效果(变化率), 所有的动画效果 (opens new window) | 属性 | power1.out |
repeat | 设置动画执行的次数 当设置为-1 的时候 是无限执行 | 属性 | 1 |
yoyo | 设置动画开启往返运动, 需要配合repeat: -1 动画无限执行 | 属性 | false |
delay | 设置动画开启前的延迟时长 | 属性 | 0/即刻 |
repeatDelay | 设置yoyo重复之间的延迟时间, 设置后, 返回时候会进行延迟等待 | 属性 | 0/即刻 |
执行gsap动画的生命周期方法 | |||
onStart | 动画开始时 | 方法 | |
onComplete | 动画完成时 | 方法 | |
onUpdate | 每次动画更新时调用的函数 | 方法 |
# gsap动画的API
API | API作用 | 备注 |
---|---|---|
.isActive() (opens new window) | 判断动画播放状态 | true 为动画执行中 false 为动画暂停 |
.pause() (opens new window) | 暂停动画 | |
.resume() (opens new window) | 播放动画 | 从当前时间轴位置开始播放,如果时间轴从未播放过,则从开始播放时间开始播放。如果时间轴已经播放过,则从上一次停止的时间点继续播放。 |
.play() (opens new window) | 开始动画 | 从时间轴被暂停的时间点恢复播放。如果时间轴从未暂停,则从开始播放时间开始播放。resume() 方法的效果类似于将时间轴从暂停点恢复。 |
.time() (opens new window) | 动画时间轴的当前时间 | 动画时间轴的当前时间, 将时间轴的当前时间设置为0。此方法将重新播放时间轴,并将其所有动画回到其初始状态。**** |
# .to到去哪动画
.to (opens new window) 是自定义动画区间 实现一个动画的最佳方式
通过gsap移动three.js物体的position位置
在three.js
中 需要规定物体的移动向量 就比规定模型.position (opens new window) 模型的X Y Z
轴
- 通过设置一些属性 来实现物体的动画效果
// 导入 gsap
import gsap from 'gsap'
// 3. 创建一个网格模型 放入创建的几何体和其自身材质
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial) // Mesh(几何体, 纹理材质)
// 通过gsap 设置three.js物体的position(位置)属性 然后设置修改position的属性 在设置其移动的持续时间即可
gsap.to(cube.position, {
// 沿着x轴位移的位置
x: 10,
// 动画时间
duration: 5,
// 动画的效果
ease: 'power1.out',
// 设置重复次数 无限循环设置-1
repeat: -1,
// 往返运动
yoyo: true,
// 延迟动画
delay: 2,
// 动画开始
onStart: () => {
console.log('动画开始')
},
// 动画完成
onComplete: () => {
console.log('动画结束')
}
})
gsap.to(cube.rotation, { x: 10, duration: 10 }) // 设置three.js模型 xyz轴旋转
实现一个暂停 播放的功能
// 设置一个gsap动画
const animate = gsap.to(cube.position, {
x: 10,
duration: 5,
ease: 'power1.out',
// 设置重复次数 无限循环设置-1
repeat: -1,
// 往返运动
yoyo: true
})
// 设置一个双击事件
window.addEventListener('dblclick', () => {
// 判断gsap动画的状态
if (animate.isActive()) { // true为动画进行 false为动画暂停
// 暂停动画
animate.pause()
} else {
// 进行动画
animate.resume()
}
})
# .fromTo从哪去哪
- .fromTo (opens new window)是
.from
和.to
的结合动画 定义了动画开始时间和动画结束实现 完整的定义了一个完整的动画的流程
.fromTo('.bg', { translateY: 0 }, { translateY: '-75%' }, 0) // 给类名为bg定义一个动画 从translateY 垂直方向位移0到-75%
# .timeline (opens new window)时间轴功能
.timeline (opens new window)提供了当我们有一个动画序列要一个一个动画执行的时候,我们一般会用 delay
来控制动画的延迟,让动画在合适的时间进行播放。这样做的话会比较麻烦,动画时间有修改的话,所有的 delay
时间都需要做调整。因此,gsap 提供了 .timeline() (opens new window) 的功能,也就是时间轴,它可以方便的控制多个动画的播放。
- 时间轴还可以配合一些gasp的插件 比如ScrollTrigger (opens new window) 滚动触发器
- 如果要设置循环播放, 一定要在
.timeline
中设置
# 创建一个时间轴
// 创建一个时间轴
let tl = gsap.timeline();
// 如果需要循环播放时间轴, 但是像duration和delay动画执行时间
const tl = gsap.timeline({
yoyo: true,
repeat: -1
})
# 为时间轴添加动画
时间轴也有类似的 to
、from
、fromTo
这些方法,可以便捷的将动画添加到时间轴上。
这个表示 3 个动画依次执行
let tl = gsap.timeline()
tl.to('#box1', { duration: 2, x: 300, })
.to('#box2', { duration: 2, x: 300, })
.to('#box3', { duration: 2, x: 300, })
# 控制时间轴
时间轴的控制方法和 Tween 的控制方法是一致的:
let tl = gsap.timeline({paused: true})
tl.to('#box1', { duration: 2, x: 300, })
.to('#box2', { duration: 2, x: 300, })
.to('#box3', { duration: 2, x: 300, })
document.querySelector("#play").onclick = () => tl.play();
document.querySelector("#pause").onclick = () => tl.pause();
document.querySelector("#resume").onclick = () => tl.resume();
document.querySelector("#restart").onclick = () => tl.restart();
# 时间轴参数
时间轴提供了 defaults
参数,可以设置动画的通用属性,比如设置了 duration: 1
,则时间轴上添加的动画,默认执行时间是 1s。在动画上设置了相同的参数,则会覆盖默认值。
let tl = gsap.timeline({ defaults: { duration: 1, x: 300 }});
tl.to('#box1', {}) // 使用默认值
.to('#box2', { x: 200 }) // 覆盖默认值
.to('#box3', {})
时间轴还可以设置一些其他的参数,比如:
delay
时间轴开始播放延迟时间repeat
重复次数repeatDelay
重复前的延迟onComplete
完成回调- ...
let tl = gsap.timeline({
repeat: 1,
onComplete: onCompleteHandler()
})
# scrollTrigger滚动触发插件
- scrollTrigger() (opens new window) 是gsap的插件 需要单独通过
.registerPlugin()
进行引入 gasp有一个单独的插件引入页面 (opens new window) scrollTrigger()
可以配合.timeline
时间轴功能 创建一个滚动触发的时间轴 这样当我们滚动页面的时候 就能触发这个时间轴- 通常
scrollTrigger()
是作为滚动监听器配合链式操作使用的trigger
设置滚动动画触发器 通常是带滚动条 被撑开的容器start
滚动触发开始位置 比如:start: 'top top'
开始位置为滚动条滚动到触发器顶部时end
滚动触发结束位置 比如:end: 'bottom bottom'
结束位置为滚动条滚动到触发器底部时scrub
滚动动画的速度 类似于过度效果有一些阻尼感
滚动案例
- 设置
.timeline
时间轴 让其在滚动的时候触发动画 滚动时触发.fromTo
完整动画 实现一个滚动动画触发效果
gsap
.timeline({
scrollTrigger: {
trigger: '.g-scroll', // gsap滚动动画触发器
start: 'top top', // 开始位置 开始位置为滚动条滚动到触发器顶部时
end: 'bottom bottom', // 结束位置 结束位置为滚动条滚动到触发器底部时
scrub: 1 // 滚动动画的速度 类似于过度效果
}
})
.fromTo('.bg', { translateY: 0 }, { translateY: '-75%' }, 0) // translateY 为垂直方向的位移 从0位移到-75%
# 暂停并重置当前动画
要重置gsap时间轴,可以使用time()
方法,将时间轴的当前时间设置为0。此方法将重新播放时间轴,并将其所有动画回到其初始状态。
- 同样适用于
.to
动画
// 创建时间轴
const tl = gsap.timeline();
// 创建Tween动画
const tween = gsap.to(".box", { duration: 1, x: 100 });
// 将Tween动画添加到时间轴
tl.add(tween);
// 重置时间轴
tl.time(0);
# +=/-= 相对值
+=/-=
可以设置相对值 可以用它设置 逆时针/顺时针旋转
gsap.to('.index${scroll}', {
rotate: '-=360', // 逆时针旋转360度 +=360顺时针
duration: 0.5,
})