简单的抖动运动 主要利用offset left 和 setTimeout

Posted liveoutfun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的抖动运动 主要利用offset left 和 setTimeout相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
position: absolute;
left:300.54px;
background: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>

var box=document.getElementById("box");

/*

left top 可以设置小数数值
并且获取得到的时候也可以得到小数数值

offsetLeft 获取的只能是整数!!

弹性运动不能用于样式不能为负数的
比如height padding

*/
function elasticSport(obj,oTarget){

obj.timer=null;//定时器

obj.oSpeed=0;//速度

obj.left=0; //left

clearInterval(obj.timer);

obj.timer=setInterval(function(){

obj.oSpeed+=(oTarget-obj.offsetLeft)/5;

//摩擦力 总是会停止
obj.oSpeed*=0.7;

obj.left+=obj.oSpeed;

//速度足够小 当前位置足够接近目标位置 停止计时器
if(Math.abs(obj.oSpeed<1) && Math.abs(obj.left-oTarget)<1){

clearInterval(obj.timer);
obj.style.left=oTarget+"px";

}

else{

obj.style.left=obj.left+"px";


}

document.title=obj.offsetLeft+" | 300";

},1000/60);

 

}

elasticSport(box,300);


</script>
</body>
</html>

以上是关于简单的抖动运动 主要利用offset left 和 setTimeout的主要内容,如果未能解决你的问题,请参考以下文章

视频稳像

添加 SKPhysicsBody 会导致 SKSpriteNode 抖动

显示器画面运动时抖动,如何解决?谢谢!

如何配置我的应用程序以检测抖动运动事件?

如何使用 Unity3D 检测移动设备上的抖动运动? C#

HTML+JavaScript实现链式运动特效