TweenMax 缩放 bgImage答案

【问题标题】：TweenMax scale bgImageTweenMax 缩放 bgImage
【发布时间】：2013-11-22 13:45:42
【问题描述】：

我正在尝试放大背景图像，然后再缩小，但无法使其正常工作，有什么想法吗？它可以很好地放大背景，但就像它从不调用“反向”函数？

TweenMax.to(bg, 1, {
                css: {
                    scaleX: 1.5,
                    scaleY: 1.5,
                    transformOrigin: "center center",
                    onComplete: reverse,
                    onCompleteParams: [bg]
                },
                delay: 0.2,
                ease: Power3.easeInOut
            });

            function reverse(el) {
                TweenMaxto(el, 0.6, {
                    css: {
                        scaleX: 1.0,
                        scaleY: 1.0,
                        transformOrigin: "center center",
                        autoAlpha: 1,
                    },
                    ease: Power2.easeOut
                });
            }

【问题讨论】：

您需要在 CSS 对象之外删除您的 onComplete 和 onCompleteParams .. 并且您的反向功能中有一个错字.. 将 TweenMaxto 更改为 TweenMax.to( .. 你错过了TweenMax 和 to() 之间的句点 . .. 你也可以只使用 scale 而不是 scaleX 和 scaleY 因为两者具有相同的值.. 你不需要包含 transformOrigin 因为默认是50% %50 与center center 相同

标签： javascript jquery gsap

【解决方案1】：

您需要将 onComplete、onCompleteParams 移到 css:{} 对象之外，如下所示，

 TweenMax.to(bg, 1, {
                css: {
                    scaleX: 1.5,
                    scaleY: 1.5,
                    transformOrigin: "center center"
                },
                onComplete: reverse,
                onCompleteParams: [bg],
                delay: 0.2,
                ease: Power3.easeInOut
            });

            function reverse(el) {
                alert("Sdasd");
                TweenMaxto(el, 0.6, {
                    css: {
                        scaleX: 1.0,
                        scaleY: 1.0,
                        transformOrigin: "center center",
                        autoAlpha: 1,
                    },
                    ease: Power2.easeOut
                });
            }

查看fiddle

希望对你有帮助。

【讨论】：