关于jquery：Scrollmagic时间轴最大持续时间偏移


Scrollmagic timelineMax duration offset

我有一个非常简单的Scrollmagic事件。它涉及到分区擦拭，如此处所述-ScrollMagic分区擦拭示例。

因此，我整理了以下ScrollMagic设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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时，其固定位置等同于滚动通过wrapper高度的4倍(相对于触发器)(相对于触发器)。

我了解，但是我不了解的是每个元素
您拥有的TimelineMax ...

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

您可以将其分解，但是1代表某种持续时间，我不最后一个变量(在这种情况下为2)表示其启动时间的偏移量。

这是我的问题，与持续时间相比，这些值代表什么？由于在这种情况下，我有4个动作，第一个动作从0开始，最后一个动作以4结束，所以对我来说有意义的是，基本上.elem1从持续时间点0%开始并在持续时间点和elem4在持续时间点300%开始并在持续时间点400%结束，但是似乎不是这种情况，或者至少#wrapper的持续时间不是持续时间元素的计算方式。 >

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

任何帮助将不胜感激。

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

A是动画从头到尾播放所需的时间。 (在这种情况下，它需要一秒钟的时间才能从其原始位置移动到预期位置)。

B是动画在时间轴内的位置。 (尤其是当您在同一时间轴中有多个不应直接连续播放的补间时，尤其有趣。)这意味着动画(fromTo(...)开始于时间轴两秒钟。

上面的时间轴现在具有三秒钟的持续时间。

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

现在是ScrollMagic部分：

ScrollMagic将时间轴或补间的持续时间投影到其自身的持续时间(ScrollMagic.Scene的持续时间)上。

相关讨论