0

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

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

我想要的效果是：
1）盒子开始是平的，但是通过将 cssperspective值更改为850px.
2）通过改变csstransform值，盒子旋转180度。
3）盒子通过恢复到再次折叠perspective: 50000.
[ 4) 当用户向后滚动超过触发器时，动画会反转。]

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

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

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

这是小提琴：http: //jsfiddle.net/gbinning/vccxufou/13/。我真的很感激一些指导！非常感谢！

编辑：我还没有scaleDiv正确设置该功能，您需要稍微调整窗口大小才能触发它。

4

2 回答 2

0

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

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，原来的补间只会做原来的位置

于 2016-02-18T19:00:31.927 回答
0

*如果您不希望我的故事转到标有粗体的底部以获得简短答案。发布这个问题的人可能早就忘记了这个问题，但是对于任何人来说，这就是我的解决方案。我将在我的回答中使用 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;
于 2020-07-23T16:10:13.637 回答