[英]TweenMax / GSAP stagger raw array values
Let's say I have the following arrays with just numbers: 假设我有以下仅包含数字的数组:
[0, 0, 0, 0]
and 和
[40, 50, 75, 80]
How do I interpolate from the first to the second, using staggering/cycling (with GSAP)? 如何使用交错/循环(使用GSAP)从第一个插值到第二个插值? (And with staggering I mean, first do the first item, then after some delay, do the next). (我的意思是惊人的,首先执行第一项,然后在经过一些延迟后执行下一项)。
Note: I have already converted the single number values to objects so that GSAP can work with them (so [{y: 0}, {y: 0}]
and so forth 注意:我已经将单个数字值转换为对象,以便GSAP可以使用它们(所以[{y: 0}, {y: 0}]
依此类推。
Answered by the following question on the GSAP forum: 在GSAP论坛上回答以下问题:
https://greensock.com/forums/topic/18692-interpolating-using-staggerto-from-one-array-w-values-to-the-next/ https://greensock.com/forums/topic/18692-interpolating-using-staggerto-from-one-array-w-values-to-the-next/
To make it possible to interpolate between a single value in a array (in this case, a number), I had to create a new timeline-like object for every value 为了能够在数组中的单个值(在本例中为数字)之间进行插值,我必须为每个值创建一个类似于时间轴的新对象
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.