TweenMax / GSAP 交错原始数组值

Question

假设我有以下仅包含数字的数组：

[0, 0, 0, 0]

和

[40, 50, 75, 80]

如何使用 staggering/cycling（使用 GSAP）从第一个插值到第二个？（我的意思是，我的意思是，先做第一项，然后在延迟一段时间后，做下一项）。

注意：我已经将单个数字值转换为对象，以便 GSAP 可以使用它们（所以 [{y: 0}, {y: 0}] 等等

Answer 1

在 GSAP 论坛上回答了以下问题：

https://greensock.com/forums/topic/18692-interpolating-using-staggerto-from-one-array-w-values-to-the-next/

为了能够在数组中的单个值（在本例中为数字）之间进行插值，我必须为每个值创建一个新的类似时间轴的对象

var a = [0, 0, 0, 0];

staggerArray(a, [10,20,30,40], {duration:1, stagger:0.5, round:true});

//vars accepts: duration, stagger, round, as well as any typical vars for TimelineMax (like onComplete, onUpdate, repeat, yoyo, etc.)
function staggerArray(start, end, vars) {
  var tl = new TimelineMax(vars),
      proxy = {},
      duration = vars.duration || 0,
      stagger = vars.stagger || 0,
      proxyUpdate = function(original, proxy, i) {
        return function() {
          original[i] = proxy[i];
        };
      },
      v, i;
  for (i = 0; i < start.length; i++) {
    proxy[i] = start[i];
    v = {};
    v[i] = end[i];
    v.onUpdate = proxyUpdate(start, proxy, i);
    if (vars.round) {
      v.roundProps = i + "";
    }
    tl.to(proxy, duration, v, stagger * i);
  }
  return tl;
}

TweenMax / GSAP 交错原始数组值

TweenMax / GSAP stagger raw array values

javascript

gsap