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

Question

我有以下伪代码，其中有两个函数使用 to() 方法执行一些动画，即 minimise() 和 maximise()。现在当我从另一个函数调用它们时，例如 fooOne() 发生的事情是主线程冲入 minimise() 函数，启动时间轴动画然后快速 returns 到 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

旁注：您有点混淆了术语 - 'multithreading' 在编程世界中的含义略有不同，并且与能够同时执行多个进程有关。 Javascript 是单线程设计的（web worker 除外），因此不适用于此处。（您可能想要删除多线程标签）。

关于你的问题： TimelineLite 有一个很好的方法来处理这个 - 从你的 'minimise' 和 'maximise' 函数你可以 return 新创建的时间线并将它们添加到 '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;
}

在时间轴上调用 'add' 默认情况下会在末尾附加 tweens/timelines。这是将复杂动画拆分为更简单动画的好方法。

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

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

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

How can I control the main thread with greensock JavaScript library?

javascript

multithreading

gsap