изменение параметра позиции временной шкалы gsap динамически

У меня есть несколько графиков времени 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)

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

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

javascript,greensock,gsap,

0

Ответов: 1

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

######## 2-е решение ########

к сожалению, это решение не работает в моем случае, но для будущей ссылки есть возможность, чтобы динамически изменять значение ... вы можете использовать функцию как параметр ... но, как я уже сказал в комментариях, эта функция получает называется только одно начальное время ... так что вы можете сделать, это восстановить временную шкалу ...

Ниже приведен пример, как добиться этого:

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>

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

JavaScript, greensock, gsap,
Похожие вопросы
Яндекс.Метрика