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) });
