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

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 - A function that should be called when the tween has completed

所以你必须像这样创建一个匿名函数:

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