如何使用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/