0

将对象传递给 GSAP 动画有一个非常奇怪的问题。在使用名为“clone”的变量时，每个参数都在起作用，而不是“rotation”，但是当我使用“clone2”时，旋转也在起作用：

animate(initial = false) {
    let scrolled = this.scroll * -1 + window.innerHeight;
    for(let animation of this.animations) {
        if(scrolled < animation.from) scrolled = animation.from;
        if(scrolled > animation.to) scrolled = animation.to;
        let progress = (scrolled - animation.from) / (animation.to - animation.from);

        console.log("animation loop:");
        console.log(JSON.stringify(animation.gsap));
        let clone = {...animation.gsap};

        for(let key in clone) {
            if(typeof clone[key] == "number") {
                if(clone[key] == 0) clone[key] = 1;
                clone[key] *= progress;
                if(clone[key] == 0) clone[key] = 1 - clone[key];
            }
        }

        let speed = 0;
        if(!initial) speed = this.speed;

        let clone2 = {x: -60.42296072507553, rotation: -15.105740181268882, opacity: 0.3021148036253776, scale: 0.45317220543806647};

        console.log(JSON.stringify(clone));
        console.log(JSON.stringify(clone2));
        console.log(JSON.stringify({ease: Power4.easeOut, ...clone}));
        console.log(JSON.stringify({ease: Power4.easeOut, ...clone2}));

        TweenLite.killTweensOf(animation.selector);
        TweenLite.to(animation.selector, speed, {ease: Power4.easeOut, ...clone2}); // here rotation and others are working
or...
        TweenLite.to(animation.selector, speed, {ease: Power4.easeOut, ...clone}); // here rotation is not working but opacity, scale, x, y, ect. are working
    }
}

该代码的 console.log 输出是：

animation loop:
{"x":-200,"rotation":-50,"opacity":0,"scale":1.5}
{"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}
{"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}
{"ease":{"_func":null,"_type":1,"_power":4,"_params":[,0,1,1]},"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}
{"ease":{"_func":null,"_type":1,"_power":4,"_params":[,0,1,1]},"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}

所以你可以通过这个例子看到情况真的很奇怪。难道我做错了什么？GSAP 有类似的问题吗？

请寻求帮助 - 我将非常感激。

4

0 回答 0