GSAP教程之tween.progress()和tween.totalProgres()、tween.time()和tween.totalTime()区别

1、tween.progress()和tween.totalProgres()的区别

tween.progress() 是获取或设置当前进度，不包含重复和延迟，而 tween.totalProgress() 是包含了重复和延迟。

例子1：
在该例子中，会运动3次（含2次重复），每次运动中，progress 都会从0开始到1结束，它包含重复和重复延迟。而 totalProgress 从第一次运动开始到第3次运动结束，整个过程从0到1，包含了重复和重复延迟。

let tween = gsap.to(".box", {
  duration: 2,
  y: 200,
  repeat: 2,
  repeatDelay: 1,
  onUpdate: function(){
    console.log(tween.progress());
    console.log(tween.totalProgress());
  }
});

例子2：
接例1，分别在3次运动中分别执行以下代码

tween.progress(0.5);

会发现在第一次运动中设置 progress 为0.5时，运动了2次半。在第2次运动中设置 progress 为0.5时运动了1次半，而在第3次运动中设置则运动了半次。所以 progress 是设置播放头到当前（或最后一次）的位置。而无论在什么时间设置 totalProgress 为0.5，它都运动了1次半，故 totalProgress 是以整个动画作为一个过程，包含了重复和重复延迟。

2、tween.time()和tween.totalTime()的区别

tween.time() 是获取或设置当前的播放时间（播放头的位置），不包含重复或延迟；而 tween.totalTime() 是包含了重复或重复延迟。

例子1：
在该例子中，会运动3次（含2次重复），每次运动中，time 始终是0到2之间。而 totalTime 则是0到8之间，包含了重复及重复延迟：23+21=8 也就是它的 totalDuration .

let tween = gsap.to(".box", {
  duration: 2,
  y: 200,
  repeat: 2,
  repeatDelay: 1,
  onUpdate: function(){
    console.log(tween.time());
    console.log(tween.totalTime());
  }
});

例子2：
接例1，分别执行以下设置。

tween.time(1); //运动2次半
tween.time(2); //运动2次
tween.time(5); //运动2次
tween.totalTime(4); //运动1次半

会发现它们运动次数不同：

•  time 设置1（duration 的一半）时，将会从第一次一半开始往后播放，播放完后会继续播放重复，所以是2次半，这里和progress(0.5) 不同，这里可理解为设置播放头的位置。
•  time 设置2（duration ）时，将会从第一次运动完开始播放，即运动2次。
•  time 设置5时，超过duration （最大值），则表示播放完开始，和设置2一样。
•  totalTime 设置4（totalDuration 的一半）时候，包含重复和重复延迟，即整个过程的一半，则从1次半的位置开始播放，即是totalProgress(0.5)