jquery - 如何使 greensock 动画反转但比原始动画更快？

Question

我有一个正在使用 Greensock 的动画。当该动画完成并且用户单击按钮时，动画将反向播放。我遇到的问题是我希望动画反向播放的速度比最初播放时快 3 倍。我对如何做到这一点感到困惑。

我当前的代码工作正常，我只需要它更快地反向动画。非常感谢任何帮助，谢谢。当前代码:

var tl = new TimelineMax();
var page4 = function(){
    console.log('hello');
    tl.staggerFrom("input", 0.5, {
      marginLeft:"-300px", 
      opacity:0, 
      delay:0.5, 
      force3D:true
    }, 0.2);
    tl.staggerFrom("label", 0.5, {
      opacity:0
    }, 0.2);
    tl.staggerFrom("#submit", 0.5, {
      opacity:0
    }, 0.2);
  };

$('#submit').on('click', function(e){
   e.preventDefault();
   tl.reverse();
   setTimeout(function(){ 
     contact();
   }, 3000 );
 });

function contact(){
   var msg = '<p>Thank you for your submission! Please give us 1 business day to reply back.</p>';
  $('.title').append(msg).fadeIn();
}

Answer 1

它应该像将 timeScale() 设置为 3 一样简单(意味着它的播放速度比正常快 3 倍):

tl.timeScale(3);

记住，你可以链接事物，这样你就可以同时反转()它:

tl.reverse().timeScale(3);

然后当您需要再次前进时:

tl.play().timeScale(1);

一切都在文档中:http://greensock.com/docs/#/HTML5/GSAP/

我还注意到您使用 setTimeout() 在 3 秒后调用 contact()。这很好，但如果您希望在时间线结束后立即调用它(在任一方向)，您可以设置 onComplete:contact 和 onReverseComplete:contact。或者还有一个 TweenLite.delayedCall()，其行为与 setTimeout() 非常相似，但始终与整个 GSAP 引擎保持完美同步，并且可能性能更高。

补间快乐!