如何使 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 引擎保持完美同步，并且可能性能更高。

补间快乐！

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

How to make a greensock animation reverse but faster than original animation?

jquery

animation

reverse

gsap