jquery - 将带有动态变量的补间添加到 Scrollmagic/GSAP 时间线

Question

我是一个 Jquery 新手，本来以为我的问题的解决方案非常简单，但是我已经尝试了此代码的一百万种排列，但我无法解决它。

我正在使用 Scrollmagic 和 GSAP，并希望从同一点触发三个补间，以便它们一个接一个地触发(略有重叠)。场景具有 duration: 0，因此用户只能启动动画，但不能控制其进度。每个补间都包含一个 css 转换，以处理同一对象 (#boxes3d)。

我想要的效果是:
1) 盒子一开始是平的，但通过将 css perspective 值更改为 850px 而分解为 3D。
2) 通过更改css transform 值，框旋转180 度。
3) 通过恢复到perspective: 50000 再次折叠框。
[ 4) 当用户向后滚动超过触发器时，动画反转。]

复杂的是，transform 值还必须包含一个动态的 scale 值，以使绝对定位#boxes3d 内的 div 适合任何屏幕尺寸的框架。 scale 值(以及整个 transform)由另一个 Jquery 函数动态设置:scaleDiv() 其中包含嵌套的 rotate3D () 和 reverse3D() 函数。

我想我需要创建一个 timelineMax(或 Lite)来对补间进行排队，但是我在将动态 css 值放入时间线。

我创建了一个 jsfiddle，其中包含我想串在一起的补间/过渡，以及必须合并到第二个补间中的 scaleDiv 函数。目前他们有单独的场景，但我想把它们都放在一个场景/时间线上。

这是 fiddle :http://jsfiddle.net/gbinning/vccxufou/13/ .我真的很感激一些指导!非常感谢!

编辑:我还没有完全正确地设置 scaleDiv 函数，您需要稍微调整窗口大小才能触发它。

Answer 1

所以你想让它动态地旋转、变换和缩放？我在我的项目中做同样的事情..我是这样做的。也许它会对你有所帮助。

http://jsfiddle.net/xko7gjty/1/

$("#abox").addClass("rotate");

var dynamicx = Math.random()*300;
var dynamicy = Math.random()*300;
var dynamicscale = Math.random();
var tween = new TweenMax("#abox", 1, {
            top: dynamicx+"px",
            left:dynamicy+"px",
            scale:dynamicscale,
            //ease: Linear.easeNone,
            delay:.2
        }); 

仅供引用，您每次都必须创建一个新的补间。 gsap 的工作方式是，当您创建一个补间时，它会使用当时的 CSS 值。如果您更改了您的 css，则原始补间将只执行原始位置