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/

我还注意到你在3秒后使用setTimeout（）来调用contact（）。没问题，但是如果你想在时间线完成后（在任一方向上）调用它，你可以设置onComplete：contact和onReverseComplete：contact。或者还有一个TweenLite.delayedCall（），它的行为与setTimeout（）非常相似，但始终与整个GSAP引擎保持完美同步，并且可能性能更高。

快乐的补间！

如何使绿色摇滚动画反向但比原始动画更快？

1 个答案: