我有以下伪代码,有两个函数使用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.
}
答案 0 :(得分: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/