GSAP staggerFrom 负延迟答案

【问题标题】：GSAP staggerFrom negative delayGSAP staggerFrom 负延迟
【发布时间】：2015-10-20 04:20:06
【问题描述】：

问题：

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

问题：

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

示例：

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

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

【问题讨论】：

标签： javascript gsap

【解决方案1】：

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

所以您可以循环使用delay，但在staggerTo 调用中将0 作为stagger 值传递。

此外，您可以将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。

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

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

【讨论】：

好像有！我不会假装我确切地知道这里发生了什么，但这让我走上了正确的道路。这是我第一次使用 Greensock，不得不说，到目前为止很喜欢它！

【解决方案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");

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

【讨论】：