动态改变 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 部分的评论中看到的那样）在特定条件（在本例中 var count >=1)

有什么办法吗？我无法 "just use a variable as position parameter"，因为它只记得给定变量的第一个状态...

提前致谢:)

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>

我希望这对以后遇到类似问题的人有所帮助:)

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

altering gsap timeline position parameter dynamically

javascript

gsap