Javascript Greensock:TweenMax重新启动多个时间线

我正在使用绿袜动画库做一些动画的东西。下面是我的代码

Tweenmax代码：

var slide4 = (function() {
  function animate() {
    var timelineFour = new TimelineLite();
    timelineFour.to("#brand-welcome-para", 1, {
        'margin-top': 0,
        'opacity': 1,
        'delay': 1
      })
      .to("#slide-1-creator-icon", 0.6, {
        'top': 300,
        'left': 45,
        'width': 155,
        'height': 155,
        ease: Elastic.easeOut
      })
      .to("#avatar-one", 0.6, {
        'left': 27,
        rotation: '-360'
      })
      .to("#avatar-two", 0.6, {
        'left': 100,
        rotation: '-360'
      })
      .to("#avatar-four", 0.6, {
        'left': '-50',
        rotation: '360'
      })
      .to("#cover-one", 1, {
        width: 0,
        ease: Linear.easeNone
      }, 'firstLoop')

    .to("#slide-1-tandem-icon", 0.6, {
        'top': 300,
        'width': 155,
        'height': 155,
        ease: Elastic.easeOut
      })
      .to("#cover-one-two", 1, {
        width: 0,
        ease: Linear.easeNone
      })

    .to("#slide-1-brand-icon", 0.6, {
        'top': 300,
        'right': 45,
        'width': 155,
        'height': 155,
        ease: Elastic.easeOut
      })
      .to("#cover-two", 2, {
        width: 0,
        ease: Linear.easeNone
      });

    var timelineChild = new TimelineMax({
      repeat: -1,
      onComplete: complete,
      delay: 4
    });
    timelineChild.to("#rotator", 1, {
        rotation: -90,
        delay: 1
      }, 'firstLoop')
      .to("#avatar-one", 1, {
        rotation: -270,
        delay: 1
      }, 'firstLoop')
      .to("#avatar-two", 1, {
        rotation: -270,
        delay: 1
      }, 'firstLoop')
      .to("#avatar-three", 1, {
        rotation: -270,
        delay: 1
      }, 'firstLoop')
      .to("#avatar-four", 1, {
        rotation: -270,
        delay: 1
      }, 'firstLoop')

    .to("#rotator", 1, {
        rotation: -180,
        delay: 1
      }, 'secondLoop')
      .to("#avatar-one", 1, {
        rotation: -180,
        delay: 1
      }, 'secondLoop')
      .to("#avatar-two", 1, {
        rotation: -180,
        delay: 1
      }, 'secondLoop')
      .to("#avatar-three", 1, {
        rotation: -180,
        delay: 1
      }, 'secondLoop')
      .to("#avatar-four", 1, {
        rotation: -180,
        delay: 1
      }, 'secondLoop')

    .to("#rotator", 1, {
        rotation: -270,
        delay: 1
      }, 'thirdLoop')
      .to("#avatar-one", 1, {
        rotation: -90,
        delay: 1
      }, 'thirdLoop')
      .to("#avatar-two", 1, {
        rotation: -90,
        delay: 1
      }, 'thirdLoop')
      .to("#avatar-three", 1, {
        rotation: -90,
        delay: 1
      }, 'thirdLoop')
      .to("#avatar-four", 1, {
        rotation: -90,
        delay: 1
      }, 'thirdLoop')

    .to("#rotator", 1, {
        rotation: -360,
        delay: 1
      }, 'fourthLoop')
      .to("#avatar-one", 1, {
        rotation: 0,
        delay: 1
      }, 'fourthLoop')
      .to("#avatar-two", 1, {
        rotation: 0,
        delay: 1
      }, 'fourthLoop')
      .to("#avatar-three", 1, {
        rotation: 0,
        delay: 1
      }, 'fourthLoop')
      .to("#avatar-four", 1, {
        rotation: 0,
        delay: 1
      }, 'fourthLoop');

    function complete(timelineChild) {
      timelineChild.restart(); // 0 sets the playhead at the end of the animation
    }
  }

  function restart() {
    timelineFour.restart();
  }

  function getTimeline() {
    return timelineFour;
  }

  return {
    animate: animate,
    restart: restart,
    timeline: getTimeline
  }

})();

我想通过从HTML单击按钮重新启动此时间线。

您可以使用

.restart（）

功能，如文档中所述：

---

请你把小提琴放在一起好吗？通过查看您的代码，不太清楚当前到底发生了什么。另外，向我们展示您尝试单击按钮并尝试重新启动时间线的代码。@TahirAhmed:很难将所有工作代码放在一起。当使用角度布线渲染视图时。确切地说，我只是想知道如何使用一个函数一次重新启动两条时间线，就是这样&

timelineChild.restart（）将在按钮单击处理程序中执行。在黑暗中拍摄，因为我无法理解整件事。不过，我认为您似乎已经知道这个解决方案。@TahirAhmed:它给出了一个错误：“无法读取未定义的”范围问题的属性“restart”。您的
animate
函数包含对
timelineFour
和
timelineChild
的引用，即
var
声明行，您试图在声明行之外访问它们，因此
未定义。只需将这些
var
行从
animate
函数的范围中取出，并将它们作为
slide
closure函数的前两行，就可以了。
//restarts, not including any delay that was defined
myAnimation.restart();

//restarts, including any delay, and doesn't suppress events during the initial move back to time:0
myAnimation.restart(true, false);