Question

我正在使用tweenlite / tweenmax在html文件中执行动画。我想根据滚动位置触发动画（如www.onlycoin.com）。但是，在我做完第一个动画之后，我无法弄清楚如何在一个想象中做第二个动画（在我的例子中，我试图向左移动图像然后向右移动它）。知道怎么做吗？这就是我所拥有的：

var controller = $.superscrollorama(),
  handleComplete = function(elem) {
    console.log('complete', elem);
$('#'+elem).css('rotation', 0);
};

var likeAnimations = new TimelineLite();
var likeReverse = new TimelineLite();

controller.addTween($('#one'),
  likeAnimations.append([
    TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
      onComplete:
      TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}})
  ])
})
]),
300,
400);

任何帮助都会很棒。

Answer 1

特殊属性 onComplete 接受来自TweenMax Docs

的函数..

onComplete：Function - 补间完成时应调用的函数

所以你必须要像这样制作一个匿名函数：

TweenMax.to($('#likeSong'), 1, {css:{left:"45px"}, onComplete: function(){ TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}}); } });

或者你必须将你的补间放在一个函数中，并让你的第一个补间的onComplete回调引用一个函数。

myFunction() { TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}}); } TweenMax.to($('#likeSong'), 1, {css:{left:"45px"}, onComplete: myFunction });

您基本上是为 onComplete 回调添加补间，而不是预期的函数。

结帐GreenSock TweenMax Docs

在滚动时触发Tweenlite / Tweenmax的连续动画

1 个答案: