GSAP staggerFrom 负延迟

Question

问题：

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

问题：

我的动画运行太长了，我不喜欢。如果我的交错动画可以在之前的动画播放时发生以减少持续时间，那就太好了。

示例：

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

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

Answer 1

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

因此您可以循环与 delay 但在 staggerTo 调用中将 0 作为 stagger 值传递。

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

Here是一个idea的分叉笔

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');
    };
...

这可能不是您想要的动画类型，但您需要根据自己的喜好调整补间 most/all 中的 position 参数，但我认为主要的收获因为你会使用 cycle 和 delay.

希望这会有所帮助。

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

Answer 2

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

Absolutely - that's already baked in. I'm not sure if you're using TweenMax or one of the timeline classes, so I'll show you both:

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 staggerFrom 负延迟

GSAP staggerFrom negative delay

javascript

gsap