使用gsap.timeline()创建时间轴

可以将它赋值给一个变量，从而方便引用。时间轴上可以挂载各种tween。默认依次执行。

let tl = gsap.timeline();
tl.from("xxx", {...})
  .form("xxxx", {...})
  .to("xxx",{...});

有了时间轴，可以更方便的管理每一段tween，而不用过多考虑各段的delay，不用担心修改一处tween会对其他产生影响，可以轻松的操作整段动画：循环播放、快速跳转等等操作。

时间轴中tween的第三个参数：position

第三个参数用来指示tween开始的时间节点。默认情况一个tween紧接着另一个，上一个播放完就播放下一个。通过设置position参数可以改变这一默认行为：

  • "+=1" / "-=1"：带引号的+=，-=，表示延后若干秒、提前若干秒播放一个tween
  • "<"：带引号的<，表示上一个tween的开始时间，可以用它方便的同步开始两个tween
  • "<1" / "<-1"：带引号的<再跟一个秒数，可以以前一个tween开始时间为基准提前或延后本段tween开始的时间
  • 1：不带引号的数字，可以直接指定tween开始的时间

时间轴的播放控制

与tween的播放控制类似：

let animation = gsap.timeline();
document.getElementById("play").onclick = ()=> animation.play();
document.getElementById("pause").onclick = ()=> animation.pause();
document.getElementById("reverse").onclick = ()=> animation.reverse();
document.getElementById("restart").onclick = ()=> animation.restart();

在timeline挂载tween的过程当中，可以通过 .add("标签名") 的方式在时间轴上设置一些时间标签。

然后就可以在时间轴的播放控制中直接跳转到这些时间点开始播放：

animation.play("标签名");

gsap.timeline()的参数

可以传入一个对象对时间轴进行设置：

gsap.timeline( { repeat:1, yoyo:true } );    // 设置重播及yoyo

timeline defaults

gsap.timeline( { defaults: { opacity:0; ease:back } } );  // 设置每一个tween的默认值

使用GSDevTools，可视化时间轴控制，辅助调试

  1. 引入GSDevTools3.min.js文件
  2. 在代码中插入一行：GSDevTools.creat(); 即可。

丰富优化动画的节奏感和flow

调整时间轴中每段tween的duration、ease还有position设置，尝试一下便会有感觉。张弛有度。

移除Flash of Un-styled Content (FOUC)

  1. 为避免闪烁，设置CSS先将目标给隐藏: visibility:hidden;
  2. 将动画封装到一个函数中，比如: init(){ ... }
  3. 修改动画中的代码，设置from动画由 autoAlpha: 0 淡入
  4. 添加js代码，页面加载完成后再触发动画：window.addEventListener( "load", function(event) { init(); } );

autoAlpha属性

autoAlpha大部分时候与alpha是一样的，只是当其值达到0时，autoAlpha会自动将visibility设置为hidden。一旦值不为0，autoAlpha会自动将visibility设置为inherit。

所以一个from autoAlpha 0，会自动让之前visibility hidden的对象显示出来，并让opacity从0到1（因为默认的opacity都是1）。