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

Question

我正在尝试找到一种方法，将任意数量的元素添加到时间轴，然后在添加它们之后，同时开始运行它们。我尝试在添加到时间线之前调用 .pause() 并在之后播放，但它总是在我调用播放之前开始。

我目前正在运行的是下面。我有 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 通过其内部代码映射时间。

我对你的代码和问题中的一些事情感到困惑:

1. 您的第二个 console.log() 在 currentTime 之前有一个硬编码的“2”，因此您得到了预期的结果。换句话说，两次 console.log() 调用中的 currentTime 均为 0。对吧？
2. 看起来您正在让高度在 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/

补间快乐!