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/

补间快乐!