问答: - 问答 - 第一PHP社区 php1.cn

问

发布于 1970-01-01 08:00

3 个回答

如果你深入了解一下浏览器的 JS 解析和页面渲染过程，你就会知道你设置了 p.w 之后浏览器并不会立即重绘 p 的位置，而是等“空闲”时再对页面进行重绘。因此这段代码实际执行过程中，并不会出现阶梯型的轨迹，而会是对角线轨迹。

2022-11-27 20:20 回答

真实的灿灿1978
动画都是障眼法，实质是以极小的时间间隔刷新屏幕从而给人以物体连续移动的错觉。因此没有真正的动画。

2022-11-27 20:20 回答

你就夜沉思

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

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

    var forwardFlag=true;
    function changepPosition(){


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

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

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

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

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

2022-11-27 20:20 回答

书友59082326

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签