js运行动画实际上是锯齿状的是吗？

假设有一个div，你要它沿着这条斜线运动，那么代码可能是这样写的：
图片描述

for:
div.w = w;
div.h = h;

由于JS是串行执行的的，所有的编程语言，这种写法时运行都是串行往下执行的吧

那么问题就来了，实际上这个div并不是真正的做斜线运动的，而是一卡一卡的向右往下运动，用图来表示：
图片描述

也就是说原来我们做的完美的动画都是“假”的啊！

我竟然从来没有意识到这个问题，真是恶心死了，我怎么才能做出真正的动画呢？

求大神指点哈：）

javascript

阅读 2.8k

3 个回答

kikong

✓ 已被采纳

怎么会呢，在JS代码执行的时候，浏览器是不知执行渲染动作的~~~
只是你绘制的频率不够块的时候，动画会出现跳跃的现象，一般每秒24帧就可以实现联系的动画而不出现跳帧。但在计算机中还涉及到下一帧动画状态及位置等计算工作，往往24帧是不够的，要保持在每秒60帧，即使这样还是可能出现跳帧，例如在游戏等需要大量高速计算的情况下~~这个也是对游戏性能的一个重要的参考指标

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="mydiv" style="width:100px;height:100px;background-color: #00a23f;position: absolute;left:20px;top:20px;"></div>
<script>
    var divDom=document.getElementById("mydiv");

    var forwardFlag=true;
    function changeDivPosition(){


        if(currentX==20){
            forwardFlag=true;
        }

        if(currentX==400){
            forwardFlag=false;
        }
        currentX=currentX+(forwardFlag?5:-5);
        currentY=currentY+(forwardFlag?5:-5);

        divDom.style.left=currentX+"px";
        divDom.style.top=currentY+"px";
    }

    //低速刷新
    setInterval(changeDivPosition,1000);

    //每秒60刷新，实际不一定能到达
//    window.requestAnimationFrame(function p() {
//        changeDivPosition();
//        window.requestAnimationFrame(p);
//    });
</script>
</body>
</html>