GSAP基础学习
TimeLines学习
学习资源来源官网,翻译来自有道词典
Getting Started with GSAP - continued - Learning Center - GreenSock
TimeLines让我们可以创建可调整的、有弹性的动画序列。下面是一个包含三个补间的简单时间线。默认情况下，游戏会在最后添加内容，这样玩家就可以一个接一个地玩游戏。
基本演示
let t1 = gsap.timeline()
t1.to('.one',{x:600,duration:2}) // 这个元素的动画时长为2秒
t1.to('.two',{x:600,duration:1}) // 这个元素的动画时长为1秒
t1.to('.three',{x:600,duration:1}) // 这个元素的动画时长为1s
Position Parameter 位置参数
这个方便的小参数是构建具有精确定时的华丽序列的秘密。看看这个时间线。
具体效果可以见官网演示
// 从时间轴的1秒开始(绝对) 相当于延迟一秒
t1.to('.one', { x: 600, duration: 2 }, 1)
// 在前一个动画的开始插入
t1.to('.two', { x: 600, duration: 1 }, "<")
// 在时间轴结束后插入1秒(间隙)
t1.to('.three', { x: 600, duration: 1 }, "+=1")官网也提供了一个调试面板可以更好地理解位置参数对动画的影响
Getting Started with GSAP - continued - Learning Center - GreenSock
Special Properties 特殊性质
时间轴和补间有很多相同的特殊属性，比如repeat和delay，可以让你把整个动画序列作为一个整体来控制!
具体看代码
// 在timeline() 方法可以填写一些元素的共有的属性
// 重复次数 -1 无限次 , 每次重复之前延迟1s yoyo 来回动画 从前到后,从后到前
let t1 = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true })
t1.to('.one', { rotation: 360 })
t1.to('.two', { rotation: 360 })
t1.to('.three', { rotation: 360 })
Timeline Defaults 时间轴的违约
如果你发现自己一遍又一遍地输入一个属性，是时候设置默认值了。在时间轴上添加到默认对象的任何属性都会被所有使用便利方法(如to()、from()和fromTo())创建的子对象继承。这是保持代码简洁的好方法。
let t1 = gsap.timeline({ defaults: { duration: 1 ,yoyo:true,repeat:-1} })
t1.to('.one', { x: 600 })
t1.to('.two', { x: 600 })
t1.to('.three', { x: 600 })Controlling Your Animations 控制动画
到目前为止，我们看到的所有动画都是在页面加载或延迟后播放的。但是如果你想对动画有更多的控制呢?一个常见的用例是在特定交互(如按钮单击或悬停)时播放动画。控制方法可以用于补间和时间线，并允许您播放，暂停，翻转甚至加速动画!
还有一些 这里列出常用的 详细可以见官网
let t1 = gsap.to('.green',{duration:6,rotation:360,x:600})
// 获取按钮元素
// 播放
document.querySelector('.play').addEventListener('click',()=>{
t1.play()
})
// 暂停
document.querySelector('.pause').addEventListener('click',()=>{
t1.pause()
})
// 继续
document.querySelector('.resume').addEventListener('click',()=>{
t1.resume()
})
// 反转
document.querySelector('.reverse').addEventListener('click',()=>{
t1.reverse()
})
// 重置
document.querySelector('.restart').addEventListener('click',()=>{
t1.restart()
})
// 清除
document.querySelector('.kill').addEventListener('click',()=>{
t1.kill()
})Callbacks 回调
如果你想知道动画何时开始，或者想在动画结束时运行一些JS，你可以使用回调函数。所有补间和时间线都有以下回调函数:
回调方法 | 解释 |
|---|---|
onComplete | 动画完成时调用。 |
onStart | 动画开始时调用 |
onUpdate | 每次动画更新时调用(动画激活时的每一帧)。 |
onRepeat | 每次动画重复时调用。 |
onreverseccomplete | 当动画反转到起点时调用。 |
gsap.to('.box',{
x:300,
duration:1.5,
delay:2,
onStart:()=>{console.log("动画开始")},
onUpdate:()=>{console.log("每一帧")},
onCompete:()=>{console.log("动画完成")}
})常用属性备忘录
1.基本
// ""to"补间(对给定的值进行动画处理)
gsap.to(".box", { // selector 表示dom元素 支持css选择器
// 以下属性 任何属性(不限于CSS)
x: 102,
backgroundColor: "red", // 元素背景颜色
duration: 1, // 动画执行一次的时长周期
delay: 0.5, // 延迟 0.5s后执行动画
ease: "power2.inOut", // 元素动画速率模式
stagger: 0.1, // 错开起动时间
paused: false, // 动画禁止还是不禁止,默认禁止 : true
overwrite: "auto", // default is false
repeat: 2, // 动画重复次数,-1表示无限次
repeatDelay: 0.2, // 每次重复动画的延迟秒数(动画周期间隔时长)
repeatRefresh: true, // 每次重复时失效
yoyo: true, // 如果为 true，则补间每隔一次重复将朝相反的方向运行。（像溜溜球）默认值：假
yoyoEase: true, // 动画速率模式 or ease like "power2"
immediateRender: false,
// onComplete: myFunc, // 动画完成之后执行的回调 函数
// other callbacks:
// onStart, onUpdate, onRepeat, onReverseComplete
// Each callback has a params property as well
// i.e. onUpdateParams (Array)
});腾讯云开发者
