Question

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

[0, 0, 0, 0]

和

[40, 50, 75, 80]

如何使用交错/循环（使用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交错原始数组值

1 个答案: