TimelineMax:用不同的时间线退出循环动画？

Question

我有一个循环时间线，其中有几个嵌套的时间线。它开始暂停，当用户单击“开始”按钮时，主时间线开始播放。

这是一个风车旋转，云彩在屏幕上移动的风景，还有一辆汽车驶入现场并停下来。

我的问题是，当用户单击“停止”按钮时，我想用与其不同的动画(其他方向)驱动屏幕上的汽车，并在此之后停止其他循环动画。

我的代码如下所示：

$('body').on('click', '.play', function(e) {
    e.preventDefault();
    tl.play();
});
$('body').on('click', '.stop', function(e) {
    e.preventDefault();
    //the car should drive away from the view and stop windmill etc.
    tl.stop();
});

tl = new TimelineMax({paused: true, repeat:-1});

windmill = new TimelineMax({repeat:-1});
windmill.to($('.windmill'), 1.5, {rotation:360, transformOrigin:"center center", ease:'linear'});

clouds = new TimelineMax({repeat:-1});
clouds.to($('.cloud'), 9, {xPercent: -1250, ease:'linear'});

car = new TimelineMax();
car.to($('.car'), 3, {xPercent: -250});

tl.add(propellers,0);
tl.add(clouds,0);
tl.add(cars,1);

Answer 1

我认为您可以在这里使用许多选项，这些选项在TimelineMax over 这里的文档中有详细介绍，可以使用.kill()方法来杀死正在运行的时间线实例，然后您可以启动另一个新的过渡程序来对您的对象进行任意操作。

下面是这方面的示例。