Question

问题：

我想知道是否有办法在greensock中为staggerFrom / staggerTo函数添加负延迟？

问题：

我的动画运行时间太长，不符合我的喜好。如果我的交错动画可能会发生，因为之前的动画正在播放以缩短持续时间，那将是很棒的。

示例：

我已将这个代码集放在一起，以说明我所追求的内容：http://codepen.io/nickspiel/pen/LpepvQ?editors=001

您可以在codepen中看到我在基本from时间轴函数上使用了负延迟，但这对staggerForm函数不起作用，因为延迟参数用于延迟每个jquery集合的元素。

Answer 1

您是否尝试过使用GSAP最新 v1.18.0 中引入的新 cycle 属性？

因此，您可以使用delay 循环，但在0来电中将stagger作为staggerTo值传递。

此外，您可以将position参数传递给staggerTo调用，使其与之前插入的补间重叠。

Here 是一个想法的分叉笔。

<强> JavaScript的：

...
animateElement = function() {
        timeline.from(main, 0.3, { scaleY: '0%', ease: Back.easeOut.config(1.7) })
        .staggerFrom(dataBlocks, 0.3, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scale: '0%', y: 100, ease: Back.easeOut.config(1.7) }, 0)
        .from(lineGraphLines, 1.5, { drawSVG: 0, ease: Power1.easeOut }, '-=0.5')
        .from(lineGraphAreas, 1, { opacity: 0, ease: Back.easeOut.config(1.7) }, '-=2.0')
        .staggerFrom(lineGraphDots, 0.2, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scale: 0, ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
        .staggerFrom(donutCharts, 0.6, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, drawSVG: 0, ease: Power1.easeOut }, 0, '-=2.0')
        .from(menuBackground, 0.3, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=6')
        .staggerFrom(menuElements, 0.3, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1')
        .from(headerBackground, 0.5, { scaleX: '0%', ease: Power1.easeOut }, '-=5.5')
        .staggerFrom(headerBoxes, 0.3, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scale: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
        .staggerFrom(headerText, 0.4, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
        .from(headerText, 0.4, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=4');
    };
...

这可能不是您想要的动画类型，但您需要根据自己的喜好调整大多数/所有补间中的position参数，但我认为主要内容为您带走将cycle与delay一起使用。

希望这在某种程度上有所帮助。

P.S。您可以传递负stagger值，但它们具有不同的含义。它告诉引擎从最后一个元素开始交错动画。

Answer 2

我在Greensock GitHub repo上问了同样的问题并得到了以下回复：

绝对 - 已经出炉了。我不确定你是否正在使用 TweenMax或其中一个时间轴类，所以我将向您展示：

TweenMax.staggerTo(elements, 1, {x:100, delay:2}, 0.01);

// - OR -

var tl = new TimelineLite();
tl.staggerTo(elements, 1, {x:100, delay:2}, 0.01);

// - OR -

var tl = new TimelineLite(); 
tl.staggerTo(elements, 1, {x:100}, 0.01, "label+=3");

在我的情况下，最后一个选项完美无瑕。

GSAP错误从负延迟

2 个答案: