Question

我是一个Jquery新手，并且认为我的问题的解决方案非常简单，但是我已经尝试了这个代码的一百万个排列而我无法解决它。

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

我想要的效果是：
1）框开始平坦，但是通过将css perspective值更改为850px将其展开为3D。
2）通过改变css transform值，框旋转180度。
3）通过恢复perspective: 50000再次折叠框。
[4]当用户向后滚动触发时动画反转。]

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

我想我需要创建一个reverse3D()（或timelineMax）来对补间进行排队，但是我在将动态css值放入时间轴时遇到了问题。

我创建了一个jsfiddle，其中包含我想要串联在一起的补间/转换，以及必须合并到第二个补间的Lite函数。目前他们有不同的场景，但我想把它们全部放在一个场景/时间线上。

这是小提琴：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，原来的补间只会做原始位置

Answer 2

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

transform: translate(314.18px, 244.9px) rotate(295deg)

应具有不同的x和y坐标，具体取决于屏幕尺寸。因此，例如，如果用户在全屏模式下启动，然后调整了会使动画变形的窗口的大小，那么我想在调整窗口大小时更新坐标。为了解决该问题，我将x和y坐标设置为要返回的不同函数width（）和height（）的值，希望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;

简而言之

作为结论，您要做的是以下

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;

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

2 个答案: