Question

我在javascript中创建了一个动画，它使用setTimeout通过计时更改各种元素的css属性但是我注意到当放大和缩小时，超时功能继续但动画停止/减慢导致元素堆叠在一起然后它冲在停止缩放之后完成的所有动画（类似于当选项卡处于非活动状态时，动画似乎停止并在您返回到先前运行动画的选项卡时恢复）虽然它不是那么多问题，因为它当你停止变焦时，它会恢复正常的流量，这只是一种刺激。

这是正常的事吗？或者我的代码中有哪些内容需要修复？

编辑：这是一个示例代码

    var scaleRegEx = new RegExp(/scale\([\s\S]+?\)/i);

    function moveThis(el, xpos, ypos){
        el.style.left = xpos + 'px';
        el.style.top = ypos + 'px';
    }

    function scaleThis(el, xscale, yscale){
        if (scaleRegEx.test(el.style.transform) === false){
            el.style.transform += " scale(" + xscale + "," + yscale + ")";
        } else {
            el.style.transform = el.style.transform.replace(
                scaleRegEx, "scale(" + xscale + "," + yscale + ")"
            );
        }
    }

    function setClip(el, x, y, width, height){
        el.style.clip = "rect(" + y + "px," + (x+width) + "px," + (y+height) + "px," + x + "px)";
    }

    var images = new Array(
        "assets/bg.png",
        "assets/box-open.png",
        "assets/box-closed.png",
        "assets/link.png",
        "assets/cursor.png",
        "assets/product-big.png",
        "assets/text1.png",
        "assets/text2.png",
        "assets/text3.png",
        "assets/logo.png",
        "assets/box-openback.png"
    );

    var loadedImage = 0;
    for (var i = 0; i <= images.length - 1; i++) {
        imageObj = new Image();
        imageObj.src = images[i];
        imageObj.addEventListener("load", iLoad, false)
    }

    function iLoad() {
        loadedImage++;
        if (images.length == loadedImage) {

            bg.style.background         = "url('" + images[0]  + "') no-repeat";
            boxOpen.style.background    = "url('" + images[1]  + "') no-repeat";
            boxClosed.style.background  = "url('" + images[2]  + "') no-repeat";
            link.style.background       = "url('" + images[3]  + "') no-repeat";
            cursorIcon.style.background = "url('" + images[4]  + "') no-repeat";
            productBig.style.background = "url('" + images[5]  + "') no-repeat";
            text1.style.background      = "url('" + images[6]  + "') no-repeat";
            text2.style.background      = "url('" + images[7]  + "') no-repeat";
            text3.style.background      = "url('" + images[8]  + "') no-repeat";
            logo.style.background       = "url('" + images[9]  + "') no-repeat";
            boxBack.style.background    = "url('" + images[10] + "') no-repeat";

            setClip(productBig, 0, 0, 615, 631);
            setClip(text2, 0, 0, 768, 90);

            setTimeout(startScene1, 2000);
        }
    }

    // zoom out the product
    function startScene1(){
        text1.style.opacity = 0;

        //fade out big product
        scaleThis(productBig, 0.13, 0.13);
        moveThis(productBig, 235, -45);

        scaleThis(boxOpen, 1.0, 1.0);
        moveThis(boxOpen, 0, 0);

        scaleThis(boxBack, 1.0, 1.0);
        moveThis(boxBack, 0, 0);

        // put the product inside box
        setTimeout(function(){
            productBig.className += " productTransition";
            productBig.style.top = "30px";
            setClip(productBig, 0, 0, 615, 0);
        }, 3000);

        // show text 2
        setTimeout(function(){
            text2.style.opacity = 1;
        }, 1000);

        // dispose text2
        setTimeout(function(){
            text2.style.left = "-728px";
        }, 4000);
    }

Answer 1

您遇到的是浏览器必须暂停动画渲染以呈现缩放，但遗憾的是不会暂停超时。你应该做什么，而不是仅仅依靠你的超时来说明下一个动画开始你应该检查以确保上一个动画已经完成或处于某个进度点。比如你有一个动画会淡化一个元素，然后是另一个动画，当第一个元素淡出时，它会开始淡入淡出。在启动第二个动画之前检查animatedElement1.style.opacity == 0;如果没有设置另一个超时或甚至循环直到不透明度== 0

放大和缩小时，Javascript动画无法正常工作

1 个答案: