Question

我有一个非常简单的Scrollmagic事件。它涉及部分擦除，如此处所述 - ScrollMagic Section Wipes Example。

因此，我将以下ScrollMagic设置放在一起。

var ctrl = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 'onLeave'
    }
});

var animationEvents = new TimelineMax()
    .fromTo($('#show .elem1'), 0.5, {opacity: '1'}, {opacity: '0', ease:Power1.easeInOut}, 0)
    .fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)
    .fromTo($('#show .elem3'), 0.5, {opacity: '0'}, {opacity: '1', ease: Back.easeOut}, 2.4)
    .fromTo($('#show .elem4'), 1, {opacity: '0'}, {opacity: '1', ease:Power1.easeInOut}, 3);

new ScrollMagic.Scene({
    triggerElement: '#wrapper',
    duration: '400%',
})
.setPin('#wrapper')
.setTween(animationEvents)
.addTo(ctrl);

基本上我所做的就是创建一个ScrollMagic控制器，制作动画的时间轴，并设置我的场景。

它很棒，没有任何问题。但是，我试图围绕其中的一些值，以便我可以从菜单中创建一个scrollTo函数，可以滚动到每个元素。

我接近工作但我似乎无法弄清楚以下内容;我的场景的持续时间是400%，这意味着当我滚动时#wrapper被固定为相当于滚过元素（相对于我的触发器）4倍{{1}的高度}。

我理解，但我不理解的是每个元素 TimelineMax你有这个......

wrapper

你可以打破它，但 1 代表某种持续时间，我不确定。最后一个变量，在这种情况下， 2 表示它何时开始的偏移量。

这是我的问题，这些值与持续时间相比代表什么。因为在这种情况下我有4个动作，第一个从 0 开始，最后一个以 4 结束，对我来说有意义的是{{1 }}从持续时间点.fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)开始，在持续时间点.elem1结束，0%从持续时间点50%开始，在持续时间点elem4结束，但不是似乎是这种情况，或者至少300%的持续时间不是持续时间元素的计算方式。

至少我需要弄清楚TimelineMax中的偏移数字与持续时间之间的表示。

非常感谢任何帮助。

Answer 1

new TimelineMax()
    .fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)
                               ^^ --> A
                                                                                  ^^ --> B

A 是动画需要从头到尾播放的时间。（在这种情况下，它需要一个秒才能从原来的位置移动到预定位置。）

B 是时间轴中动画的位置。（当你在同一个时间轴中有几个 Tweens 不应该直接连续播放时，尤其有趣。）这里意味着动画（fromTo(...)在时间轴中开始两次秒。

以上时间轴现在的持续时间三秒。

如果我们将此逻辑应用于您的时间轴 animationEvents，我们会发现持续时间 四秒。

现在为 ScrollMagic 部分：

ScrollMagic将时间轴或 Tween 的持续时间投影到自己的持续时间（持续时间} 。

Scrollmagic timelineMax duration offset

1 个答案: