Question

我有以下伪代码，有两个函数使用to（）方法执行一些动画，即minimize（）和maximize（）。现在，当我从另一个函数调用它们时，例如fooOne（）会发生什么，主线程在reduce（）函数中运行，启动时间轴动画然后快速返回到fooOne（）并跳转到maximize（），它也启动了时间线动画。现在我得到的是minimal（）和maximize（）几乎同时运行的动画，我怎样才能完成并且只在最小化完成后执行最大化？

我可以使用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/

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

1 个答案: