javascript - 如何使用 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 在设计上是单线程的(除了网络 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/