javascript - js运行动画实际上是锯齿状的是吗？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

PHP中文网 2017-04-11 10:30:32

[JavaScript讨论组]

384

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

for:
p.w = w;
p.h = h;

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

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

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

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

求大神指点哈：）

PHP中文网

认证高级PHP讲师

全部回复(3)

大家讲道理2017-04-11 10:32:32 3楼

怎么会呢，在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>