javascript - GSAP staggerFrom 负延迟

Question

问题:

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

问题:

我觉得动画运行时间太长，不符合我的喜好。如果我的交错动画可以在前面的动画播放时发生以缩短持续时间，那就太好了。

示例:

我整理了这个codepen来说明我所追求的:http://codepen.io/nickspiel/pen/LpepvQ?editors=001

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

Answer 1

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

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

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

Here 是一个想法的 fork 笔。

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。

希望这能以某种方式有所帮助。

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