0

我有一个非常简单的 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 倍wrapper。

我明白，但我不明白的是在 TimelineMax 的每个元素中你有这个......

.fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)

您可以将其全部分解，但1代表某种持续时间，我不确定。最后一个变量，在本例中为2表示其开始时间的偏移量。

这是我的问题，与持续时间相比，这些值代表什么。因为在这种情况下，我有 4 个动作，第一个动作从0开始，最后一个动作以4结束然而，持续时间点似乎并非如此，或者至少持续时间可能不是持续时间元素的计算方式。.elem10%50%elem4300%400%#wrapper

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

任何帮助将不胜感激。

4

1 回答 1

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

A是动画从开始到结束需要播放的时间。（在这种情况下，它需要一秒钟才能从其原始位置移动到其预期位置）。

B是动画在Timeline中的位置。（当您在同一时间轴中有多个不应该连续播放的Tweens时尤其有趣。）这里的意思是动画（从Timeline开始两秒。fromTo(...)

上面的时间线现在有三秒的持续时间。

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


现在对于ScrollMagic部分：

ScrollMagic将Timeline或Tween的持续时间投影到它自己的持续时间（ 的持续时间）。ScrollMagic.Scene

于 2016-02-09T08:51:09.730 回答