Question

I have a looping timeline that has several nested timelines in it. It starts paused and when a user clicks a start button, the main timeline starts playing.

It is a scenery with a windmill rotating and clouds travelling across the screen, there is also a car that drives into the scene and stops.

My problem is that when a user clicks the stop button, I want to drive the car of the screen with a different animation than it came in (other direction) and stop the other looping animations after that.

My code looks something like this:

$('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 here 的文档中有详细说明，可以杀死正在运行的时间轴实例，例如使用 .kill() 方法然后您可以启动另一个新的补间来对对象执行任何操作。

这是 example 。

TimelineMax: exit looping animation with a different timeline?

1 个答案: