動態更改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>

我希望可以幫助一些人在未來:)