Question

我试图找到一种方法来向时间轴添加任意数量的元素，然后在添加它们之后，从同一时间开始运行它们。我在添加到时间轴之前尝试调用.pause（）然后播放，但它总是在我调用play之前启动。

我目前正在运行的是以下内容。我有2个控制台日志打印出时间，这可能表明代码实际上正在做我想要的，因为第一个console.log总是打印0.第二个总是打印20。我不确定为什么我们在第一次打印时为0，因为如果.pause（）没有工作，为什么我不会在.each循环中添加.to时启动它？

expand: function(elems) {
    var tl = new TimelineLite();
    tl.pause();
    elems.each(function() {
        this.style.height = 'auto';
        var Height = getComputedStyle(this).height;
        this.style.height = 0;
        tl.to(this, .1, {height:fullHeight}, 0);
        tl.to(this, .5, {opacity:1}, .2);
    });
    var currentTime = tl.time();
    console.log('the current tl time ' + currentTime);
    currentTime = tl.time();
    console.log('the current tl time 2' + currentTime);
    tl.play();

Answer 1

对于一系列并发运行的补间使用TimelineLite / Max是绝对正确的 - 这使您可以使用一个对象完全控制所有这些动画。没问题。

此外，没有必要在同一个刻度上暂停（）然后播放（）。 GSAP是完全同步的。如果一段代码执行需要一段时间并不重要 - GSAP通过其内部代码映射时间。

我对您的代码和问题中的一些内容感到困惑：

你的第二个console.log（）在currentTime之前有一个“2”硬编码，因此你得到了预期的结果。换句话说，在BOTH console.log（）调用中currentTime为0。正确？
看起来你在0.1秒内有一个从0到全高的高度动画，并等待不透明度动画直到0.2秒（所以在达到整个高度后0.1秒）。这是故意的吗？我不确定你是否在某处将不透明度设置为0，但如果是这样，你可能永远不会看到高度动画。也许这是你的计划，但我想我会问。

你可以通过使用基于函数的高度补间值来简化一些事情，如下所示：

var tl = new TimelineLite();
tl.fromTo(elems, 1, 
  {height:0}, 
  {height:function(i, e) {
      e.style.height = "auto";
      var fullHeight = window.getComputedStyle(e).height;
      e.style.height = "0px";
      return fullHeight;
    }
  });
//we'll start the opacity tweens 0.2 seconds later.
tl.to(elems, 1, {opacity:1}, 0.2);

以下是演示：https://codepen.io/GreenSock/pen/6e2cadb2764f2417366e7b87567d6002?editors=0010

如果您需要任何其他帮助，请随时通过https://greensock.com/forums/

快乐的补间！

如何添加动态数量的动画，然后并行运行Greensock

1 个答案: