динамическое изменение положения временной шкалы 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>

, что я хочу добиться того, чтобы (как вы можете увидеть в моем комментарии в яваскрипта разделе) изменяет параметр позиции первого to() после определенного условия (в данном случае var count >=1)

есть ли способ сделать это? я не был в состоянии «просто использовать переменную в качестве параметра положения», потому что он помнит только первое состояние данной переменной ...

заранее спасибо :)

Answer 1

хорошо, так что я пришел к выводу, !

Я узнал, что есть два возможных способа достижения, чего я хотел. для меня, только первый из них работает ... второй не представляется возможным в моей установке ...

######## 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>

я надеюсь, что помогает некоторым людям с подобной проблемой в будущем :)