*如果您不想看到我的故事，请转到标有粗体字的底部以获取简短答案。
发这个问题的人可能早就忘记了这个问题，但是对于任何人来这里，这就是我的解决方案。我将在我的回答中使用 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;