在不同的 ScrollMagic 场景中重用补间答案

【问题标题】：Reuse tweens in different ScrollMagic scenes在不同的 ScrollMagic 场景中重用补间
【发布时间】：2015-02-08 12:36:03
【问题描述】：

我是 scrollmagic 的新手，我想在不同的触发器上使用相同的补间以避免代码重复。例如：

var controller, firstTween, secondTween;

controller = new ScrollMagic;

firstTween = TweenMax.to($('body'), .1, {
  backgroundCoror: "#ff0000"
});

secondTween = TweenMax.to($('body'), .1, {
  backgroundCoror: "#ffffff"
});

controller.addScene([
  new ScrollScene({
    triggerElement: '#triggerOne'
  }).setTween(firstTween), new ScrollScene({
    triggerElement: '#triggerTwo'
  }).setTween(secondTween), new ScrollScene({
    triggerElement: '#triggerThree'
  }).setTween(firstTween), new ScrollScene({
    triggerElement: '#triggerFour'
  }).setTween(secondTween)
]);

但只适用于最后两个场景。为了使它起作用，我必须在每个场景中重复补间。是否可以制作可重复使用的补间？

【问题讨论】：

标签： javascript animation gsap scrollmagic

【解决方案1】：

简短回答：否 - 补间对象只能分配给一个场景，反之亦然。

为避免代码重复，请循环创建场景，如下所示：

var var controller, firstTween, secondTween,
triggers = ["triggerOne", "triggerTwo", "triggerThree", "triggerFour"];

controller = new ScrollMagic();

triggers.forEach(function (trigger, index) {
    // make tween
    var thistween = TweenMax.to($('body'), .1, {
        backgroundColor: (index % 2) ? "#ffffff" : "#ff0000"
    });
    // make scene
    new ScrollScene({
        triggerElement: '#' + trigger;
    })
    .setTween(thistween)
    .addTo(controller);
});

还请注意，如果触发器是短暂连续的，您可能会遇到补间相互覆盖的问题。要了解发生这种情况的更多原因以及解决方法，请在此处阅读：
https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another

【讨论】：