如何使用greensock JavaScript库控制主线程？

Question

我有以下伪代码，其中有两个函数使用to（）方法执行一些动画，即minimise（）和maximise（）。 现在，当我从另一个函数（例如fooOne（））调用它们时，会发生的情况是主线程冲入了minimise（）函数，启动了时间轴动画，然后迅速返回fooOne（）并跳至maximise（），它也开始了时间轴动画。 现在我得到的是minimise（）和maximise（）中的动画几乎同时运行，我该如何去做，只有在最小化完成后才执行最大化？

我可以使用jQuery来做到这一点，但在互联网上找不到有关此主题的任何文档或帖子。

问候。

function fooOne(){
   minimise() ;
   maximise() ;
}

function fooTwo(){
   maximise() ;
}

function fooThree(){
   minimise() ;
}

function minimise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.
}

function maximise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.
}

Answer 1

旁注：您可能会混淆一些术语-“多线程”在编程世界中的含义有所不同，并且与能够同时执行多个进程有关。 Javascript是设计为单线程的（除Web worker以外），因此此处不适用。 （您可能要删除多线程标记）。

关于您的问题：TimelineLite有一个很好的处理方法-从“最小化”和“最大化”功能中，您可以返回新创建的时间线，并将它们添加到“ fooOne”功能内：

function fooOne(){
   var mainTimeline = new TimelineLite();
   mainTimeline.add(minimise());
   mainTimeline.add(maximise());
}

function fooTwo(){
   maximise() ;
}

function fooThree(){
   minimise() ;
}

function minimise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.

   return timeline;
}

function maximise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.

   return timeline;
}

默认情况下，在时间轴上调用“添加”将在最后附加补间/时间轴。 这是将复杂的动画拆分为更简单的动画的好方法。

代码库示例： http ：//codepen.io/anon/pen/JGBEYj

另请查看文档以了解详细信息： http : //greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/