GSAP教程之tween.duration()和tween.totalDuration()的区别

tween.duration() 是获取或设置动画的时长，不包含重复或延迟。而 tween.totalDuration() 是包含重复和重复延迟。

例子1：
该动画repeat=2, 一共运动3次，2次重复延迟1秒，那么  totalDuration = 2 * 3 + 2 * 1 = 8 ，而 duration 则是单次时长。

let tween = gsap.to(".box", {
  duration: 2,
  y: 200,
  repeat: 2,
  repeatDelay: 1
});
tween.duration(); //返回2，不包含重复和任何延迟
tween.totalDuration(); //返回8， 包含了重复以及重复延迟

例子2：
接例1，将 duration 设置1时，动画的时长由原本的2变为1，则  totalDuration = 1*3 + 2*1 =5 。

tween.duration(1); //返回2，不包含重复和任何延迟
tween.totalDuration(); //返回5

例子3：
接例1，将 totalDuration 设置5时，反过来推算 duration 则变为1。这里注意延迟不压缩。

tween.totalDuration(5);
tween.duration(); //返回1

在例如：设置10时， duration = (10 - 2(总延迟时长)) / 3 = 2.66667 。

tween.totalDuration(10);
tween.duration(); //返回2.66667