动态更改gsap时间轴位置参数

Question

我有几个gsap时间表，开始于不同的时间。

在我的设置中，使用位置参数作为排序的时间轴是必要的。 delay()是不幸的是不可能的。

这里是一些示例代码：

sampleTimeline= new TimelineMax({paused: true,onComplete:restartSampleTimeline},0) 
 
.to("#sampleblock",2,{x:"200px"},2) /* <-- this parameter needs to be dynamic */ 
 
.to("#sampleblock",2,{x:"0px"},4); 
 

 
var count = 0; 
 

 
function restartSampleTimeline(){ 
 
    $("#sampleblock").html(count); 
 
    count++; 
 
    if(count>=1){ 
 
    // at this position, i want to skip the two seconds/change the number "2"! 
 
    sampleTimeline.restart(); 
 
    }else{ 
 
    sampleTimeline.restart(); 
 
    } 
 
} 
 

 
sampleTimeline.play();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script> 
 
<div id="sampleblock">haha</div>

我想达到的目标是（你可以在我的JavaScript部分评论见）改变了第一的位置参数to()特定条件后（此例中为var count >=1）

有没有办法做到这一点？我没能“只使用一个变量作为位置参数”，因为它只记得给定的变量的第一状态...提前:)

Answer 1

好吗

感谢，所以我得出一个结论！

我发现，有两种可能的方式来实现，我想要的。 对我来说，只有第一个作品......第二个是不是在我设置的可能......

########一号方案########

在我的情况下，我想跳过第一个补间延迟...所以我做了什么，是要更改第二个补间到"+=0"，以便它始终在补间之后立即开始，让第一补间，它是如何。 ..

我改变的事情是if(count>=1)重新启动时间表，并寻求希望的位置....所以我最终的结果如下：

sampleTimeline= new TimelineMax({paused: true,onComplete:restartSampleTimeline},0) 
 
.to("#sampleblock",2,{x:"200px"},2) 
 
.to("#sampleblock",2,{x:"0px"},"+=0"); 
 

 
var count = 0; 
 

 
function restartSampleTimeline(){ 
 
    $("#sampleblock").html(count); 
 
    count++; 
 
    if(count>=1){ 
 
    sampleTimeline.restart(); 
 
    sampleTimeline.seek(2); 
 
    }else{ 
 
    sampleTimeline.restart(); 
 
    } 
 
} 
 

 
sampleTimeline.play();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script> 
 
<div id="sampleblock">haha</div>

########第二方案########

不幸的是，这种解决方案并没有在我的情况，但以供将来参考工作，有一个可能性，动态地改变值...你可以使用一个函数作为参数......但正如我已经在评论中所说，该函数只被称为一个初始时间......所以你可以做什么，重新生成时间线...

下面是一个例子，如何实现这一点：

sampleTimeline= new TimelineMax({paused: true,onComplete:restartSampleTimeline},0) 
 
.to("#sampleblock",2,{x:"200px"},returnDelay("first")) 
 
.to("#sampleblock",2,{x:"0px"},"+=0"); 
 

 
var count = 0; 
 

 
function restartSampleTimeline(){ 
 
    $("#sampleblock").html(count); 
 
    count++; 
 
    if(count>=1){ 
 
    sampleTimeline.clear(); 
 
    sampleTimeline 
 
    .to("#sampleblock",2,{x:"200px"},returnDelay("not-first")) 
 
    .to("#sampleblock",2,{x:"0px"},"+=0"); 
 
    sampleTimeline.play(); 
 
    }else{ 
 
    sampleTimeline.restart(); 
 
    } 
 
} 
 

 
sampleTimeline.play(); 
 

 
function returnDelay(i){ 
 
    if(i=="first"){ 
 
    return 2; 
 
    } 
 
    if(i!="first"){ 
 
    return 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script> 
 
<div id="sampleblock">haha</div>

我希望可以帮助一些人在未来:)