Question

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

在我的设置中，使用position参数作为排序时间轴是必要的。遗憾的是，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的位置参数< / p>

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

提前感谢:)

Answer 1

好的，所以我得出了结论！

我发现，有两种可能的方法可以实现，我想要的是什么。对我来说，只有第一个有效...第二个在我的环境中是不可能的......

######## 1st Solution ########

在我的情况下，我想跳过第一个补间延迟...所以我做了，是将第二个补间更改为"+=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时间轴位置参数

1 个答案: