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

Question

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

我运行ning 目前在下面。我有 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”，因此你得到了预期的结果。换句话说，两个 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

How to add dynamic number of animations, then run all in parallel Greensock

javascript

animation

gsap

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

How to add dynamic number of animations, then run all in parallel Greensock

javascript

animation

gsap

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