Fatal编程技术网
  • jquery/
  • Jquery 将带有动态变量的tween添加到Scrollmagic/GSAP时间线

Jquery 将带有动态变量的tween添加到Scrollmagic/GSAP时间线

jquery

Jquery 将带有动态变量的tween添加到Scrollmagic/GSAP时间线,jquery,tween,gsap,scrollmagic,dynamic-css,Jquery,Tween,Gsap,Scrollmagic,Dynamic Css,我是一个Jquery新手，本以为我的问题的解决方案很简单，但是我已经尝试了一百万次这段代码的排列，但我无法解决它。 我正在使用Scrollmagic和GSAP，并希望从同一点触发三个tween，以便它们以轻微重叠的方式一个接一个地发射。场景的持续时间为：0，因此用户仅启动动画，而不控制其进度。每个tween包含一个css转换，用于处理同一个boxes3d对象。 我想要的效果是： 1长方体一开始是平面的，但通过将css透视值更改为850px，将长方体分解为3D。 2通过更改css变换值，框旋转18

我是一个Jquery新手，本以为我的问题的解决方案很简单，但是我已经尝试了一百万次这段代码的排列，但我无法解决它。 我正在使用Scrollmagic和GSAP，并希望从同一点触发三个tween，以便它们以轻微重叠的方式一个接一个地发射。场景的持续时间为：0，因此用户仅启动动画，而不控制其进度。每个tween包含一个css转换，用于处理同一个boxes3d对象。 我想要的效果是： 1长方体一开始是平面的，但通过将css透视值更改为850px，将长方体分解为3D。 2通过更改css变换值，框旋转180度。 3通过恢复到透视：50000，框再次折叠。 [4当用户向后滚动超过触发器时，动画反转。] 复杂的是，变换值还必须包含动态比例值，以便使框3d内绝对定位的div适合任何屏幕大小的帧。scale值和整个转换由另一个Jquery函数动态设置：scaleDiv，它包含嵌套的rotate3D和reverse3D函数。 我想我需要创建一个timelineMax或Lite来排队，但是我在将动态css值放入时间线时遇到了问题。 我已经创建了一个JSFIDLE，其中包含我想要串在一起的tweens/转换，以及必须合并到第二个tween中的scaleDiv函数。目前，它们有单独的场景，但我想将它们全部放在一个场景/时间线中。 这是小提琴：。我真的非常感谢你的指导！非常感谢你

编辑：我没有正确设置scaleDiv函数，您需要稍微调整窗口大小以触发它。

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

仅供参考，你每次都必须创建一个新的吐温。gsap的工作方式是，当您创建一个tween时，它会在此时使用CSS值。如果您更改了css，原始tween将只执行原始位置

*如果您不想让我的故事进入底部，并用粗体标记简短的答案。 发布此问题的人可能早就忘记了此问题，但对于来到这里的任何人来说，这是我的解决方案。我将在回答中使用gsap3，因为这是当前的问题。当我遇到这个问题时，我正在制作一个基于滚动的动画。正如您在代码中看到的那样，我想在我的动画中做的是在基于滚动的div上创建一个条目动画。问题在于以下CSS

transform: translate(314.18px, 244.9px) rotate(295deg)
应具有不同的x和y坐标，具体取决于屏幕大小。例如，如果用户在全屏上启动，然后调整窗口大小，这会扭曲动画，那么我想更新窗口大小调整时的坐标。为了解决这个问题,，我将x和y坐标设置为不同函数宽度和高度的返回值，希望gsap.to函数将函数作为其值存储在键值对中，但如上所述，它不仅存储变量值一次，而且还存储函数的返回值，而不是函数本身，所以我尝试了其他方法。也就是说，将所有动画放在一个函数中，并在每次调整窗口大小时调用它。前后代码如下所示

在解决之前

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
function updateDimention() {
    vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    vh = Math.max(document.documentElement.clienthHeight || 0, window.innerHeight || 0)
}
window.onresize=updateDimention;
let height = function(){return vh};
let width = function(){return vw};

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
const entryAnim = gsap.timeline(
        {
            scrollTrigger:{
                scrub:true,
                pin:true,
                trigger:".main",
                start:"top top",
                end:"+=6000px",
            },
            // yoyo:true,
        }
        );
        entryAnim.pause()
        entryAnim.to(
            ".pic1",{
            motionPath:{
                path:[{x:0,y:0,},{x:0.155*width(),y:0.2*height()},{x:0.18*width(),y:0.25*height()},{x:0.23*width(),y:0.395*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
            
        }).to(
            ".pic2",{
            motionPath:{
                path:[{x:0.18*width(),y:0,},{x:0.15*width(),y:0.21*height()},{x:0*width(),y:0.40*height()},{x:-0.000503*width(),y:0.75*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
        
        }).to(
            ".pic3",{
            motionPath:{
                path:[{x:-0.15*width(),y:-0.10,},{x:-0.10*width(),y:-0.5*height()},{x:0*width(),y:0*height()},{x:0.4245*width(),y:0.324*height()}],
                // type:"cubic",
                autorotate:false,
            }, 
        
        })
        
        
        const rotationAnim = gsap.timeline(
        {
            scrollTrigger:{
                trigger:".main",
                start:"top top",
                end:"+=6000px",
                pin:true,
                scrub:true
            },
            // yoyo:true,
        }
        );
        rotationAnim.pause()
        rotationAnim.to(".pic1",{
            rotation:295,
        }).to(
            ".pic2",{
                rotation:329,
            }
        ).to(".pic3",{
            rotation:48,
        })

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
function updateDimention() {
    vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    vh = Math.max(document.documentElement.clienthHeight || 0, window.innerHeight || 0)
}
let height = function(){return vh};
let width = function(){return vw};

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
function Animation(){
    const entryAnim = gsap.timeline(
        {
            scrollTrigger:{
                scrub:true,
                pin:true,
                trigger:".main",
                start:"top top",
                end:"+=6000px",
            },
            // yoyo:true,
        }
        );
        entryAnim.pause()
        entryAnim.to(
            ".pic1",{
            motionPath:{
                path:[{x:0,y:0,},{x:0.155*width(),y:0.2*height()},{x:0.18*width(),y:0.25*height()},{x:0.23*width(),y:0.395*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
            
        }).to(
            ".pic2",{
            motionPath:{
                path:[{x:0.18*width(),y:0,},{x:0.15*width(),y:0.21*height()},{x:0*width(),y:0.40*height()},{x:-0.000503*width(),y:0.75*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
        
        }).to(
            ".pic3",{
            motionPath:{
                path:[{x:-0.15*width(),y:-0.10,},{x:-0.10*width(),y:-0.5*height()},{x:0*width(),y:0*height()},{x:0.4245*width(),y:0.324*height()}],
                // type:"cubic",
                autorotate:false,
            }, 
        
        })
        
        
        const rotationAnim = gsap.timeline(
        {
            scrollTrigger:{
                trigger:".main",
                start:"top top",
                end:"+=6000px",
                pin:true,
                scrub:true
            },
            // yoyo:true,
        }
        );
        rotationAnim.pause()
        rotationAnim.to(".pic1",{
            rotation:295,
        }).to(
            ".pic2",{
                rotation:329,
            }
        ).to(".pic3",{
            rotation:48,
        })
}

Animation()
function updateAnimation (){
    updateDimention();
    Animation();

}

window.onresize=updateAnimation;
解决后

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
function updateDimention() {
    vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    vh = Math.max(document.documentElement.clienthHeight || 0, window.innerHeight || 0)
}
window.onresize=updateDimention;
let height = function(){return vh};
let width = function(){return vw};

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
const entryAnim = gsap.timeline(
        {
            scrollTrigger:{
                scrub:true,
                pin:true,
                trigger:".main",
                start:"top top",
                end:"+=6000px",
            },
            // yoyo:true,
        }
        );
        entryAnim.pause()
        entryAnim.to(
            ".pic1",{
            motionPath:{
                path:[{x:0,y:0,},{x:0.155*width(),y:0.2*height()},{x:0.18*width(),y:0.25*height()},{x:0.23*width(),y:0.395*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
            
        }).to(
            ".pic2",{
            motionPath:{
                path:[{x:0.18*width(),y:0,},{x:0.15*width(),y:0.21*height()},{x:0*width(),y:0.40*height()},{x:-0.000503*width(),y:0.75*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
        
        }).to(
            ".pic3",{
            motionPath:{
                path:[{x:-0.15*width(),y:-0.10,},{x:-0.10*width(),y:-0.5*height()},{x:0*width(),y:0*height()},{x:0.4245*width(),y:0.324*height()}],
                // type:"cubic",
                autorotate:false,
            }, 
        
        })
        
        
        const rotationAnim = gsap.timeline(
        {
            scrollTrigger:{
                trigger:".main",
                start:"top top",
                end:"+=6000px",
                pin:true,
                scrub:true
            },
            // yoyo:true,
        }
        );
        rotationAnim.pause()
        rotationAnim.to(".pic1",{
            rotation:295,
        }).to(
            ".pic2",{
                rotation:329,
            }
        ).to(".pic3",{
            rotation:48,
        })

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
function updateDimention() {
    vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    vh = Math.max(document.documentElement.clienthHeight || 0, window.innerHeight || 0)
}
let height = function(){return vh};
let width = function(){return vw};

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
function Animation(){
    const entryAnim = gsap.timeline(
        {
            scrollTrigger:{
                scrub:true,
                pin:true,
                trigger:".main",
                start:"top top",
                end:"+=6000px",
            },
            // yoyo:true,
        }
        );
        entryAnim.pause()
        entryAnim.to(
            ".pic1",{
            motionPath:{
                path:[{x:0,y:0,},{x:0.155*width(),y:0.2*height()},{x:0.18*width(),y:0.25*height()},{x:0.23*width(),y:0.395*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
            
        }).to(
            ".pic2",{
            motionPath:{
                path:[{x:0.18*width(),y:0,},{x:0.15*width(),y:0.21*height()},{x:0*width(),y:0.40*height()},{x:-0.000503*width(),y:0.75*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
        
        }).to(
            ".pic3",{
            motionPath:{
                path:[{x:-0.15*width(),y:-0.10,},{x:-0.10*width(),y:-0.5*height()},{x:0*width(),y:0*height()},{x:0.4245*width(),y:0.324*height()}],
                // type:"cubic",
                autorotate:false,
            }, 
        
        })
        
        
        const rotationAnim = gsap.timeline(
        {
            scrollTrigger:{
                trigger:".main",
                start:"top top",
                end:"+=6000px",
                pin:true,
                scrub:true
            },
            // yoyo:true,
        }
        );
        rotationAnim.pause()
        rotationAnim.to(".pic1",{
            rotation:295,
        }).to(
            ".pic2",{
                rotation:329,
            }
        ).to(".pic3",{
            rotation:48,
        })
}

Animation()
function updateAnimation (){
    updateDimention();
    Animation();

}

window.onresize=updateAnimation;
总之

作为结论，你想做的是

function Animation(){
        //in here put all your gsap related animations
    }
    //then down here call the Animation function every time values are changed so that
    //the gap animation can be redefined. In this case I am going to do it in window resize.
    window.onresize = Animation;
看一看。这还不能解释window.resize，但我想知道我是否走对了方向。如果你想让我继续，请告诉我。现在看，我会尽快向你汇报。谢谢塔希尔。。它也不适用于rotate3D、reverse3D和scaleDiv方法。我仍在试图弄清楚你到底想达到什么目的，以便为你提供一种替代方法。我想当我说“爆炸”时，我把你弄糊涂了——我不想让盒子的表面破裂——只是为了在透视变化时显示盒子的深度。因此，我对我发布的小提琴上的转换感到满意，但我一直遇到的问题是在二者之间包含动态值，即translateX'+parentWidth+'px和scaleY'+scale+'scaleX'+scale+''。然后我想使用时间线将三个场景连接在一起，这样只有一个触发器，持续时间为0px，但应该运行几秒钟。在下一篇评论中继续…您的代码看起来比我的更有希望-如果您使用TweenMax.set设置css值，我认为它工作得更快，对吗？为了看到rotate3D/reverse3D工作，您必须在滚动第二个触发器之前稍微调整窗口的大小-尽管函数应该 ld确实可以与window.onload中的scaleDiv函数同时调用——这只是我的脆弱编码。