javascript - js运行动画实际上是锯齿状的是吗？
本文介绍了javascript - js运行动画实际上是锯齿状的是吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
假设有一个div，你要它沿着这条斜线运动，那么代码可能是这样写的：
for:
div.w = w;
div.h = h;
由于JS是串行执行的的，所有的编程语言，这种写法时运行都是串行往下执行的吧
那么问题就来了，实际上这个div并不是真正的做斜线运动的，而是一卡一卡的向右往下运动，用图来表示：
也就是说原来我们做的完美的动画都是假的啊！
我竟然从来没有意识到这个问题，真是恶心死了，我怎么才能做出真正的动画呢？
求大神指点哈：）
解决方案
怎么会呢，在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>这篇关于javascript - js运行动画实际上是锯齿状的是吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
