原生js一般是如何实现运动效果的?

Question

我移动端一般就是用css3的动画,pc端都是用jq那几个常用动画就没用过其他的了,想问下大家用原生js实现运动效果都是怎么实现的?会不会很麻烦或者用什么库吗?

Answer 1

一般是：setInterval(function(){&nbsp;&nbsp;&nbsp;&nbsp;//dosomething...},1000/60);或者：window.requestAnimationFrame(function(/*&nbsp;time&nbsp;*/&nbsp;time){&nbsp;&nbsp;//&nbsp;time&nbsp;~=&nbsp;+new&nbsp;Date&nbsp;//&nbsp;the&nbsp;unix&nbsp;time});或者：//&nbsp;shim&nbsp;layer&nbsp;with&nbsp;setTimeout&nbsp;fallbackwindow.requestAnimFrame&nbsp;=&nbsp;(function(){&nbsp;&nbsp;return&nbsp;&nbsp; window.requestAnimationFrame&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.webkitRequestAnimationFrame&nbsp;||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.mozRequestAnimationFrame&nbsp;&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(&nbsp;callback&nbsp;){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.setTimeout(callback,&nbsp;1000&nbsp;/&nbsp;60); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; })();//&nbsp;usage://&nbsp;instead&nbsp;of&nbsp;setInterval(render,&nbsp;16)&nbsp;....(function&nbsp;animloop(){ &nbsp;&nbsp;requestAnimFrame(animloop); &nbsp;&nbsp;render(); })();//&nbsp;place&nbsp;the&nbsp;rAF&nbsp;*before*&nbsp;the&nbsp;render()&nbsp;to&nbsp;assure&nbsp;as&nbsp;close&nbsp;to//&nbsp;60fps&nbsp;with&nbsp;the&nbsp;setTimeout&nbsp;fallback.或者（更牢靠的封装）：(function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;lastTime&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;vendors&nbsp;=&nbsp;['webkit',&nbsp;'moz'];&nbsp;&nbsp;&nbsp;&nbsp; for(var&nbsp;x&nbsp;=&nbsp;0;&nbsp;x&nbsp;<&nbsp;vendors.length&nbsp;&&&nbsp;!window.requestAnimationFrame;&nbsp;++x)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.requestAnimationFrame&nbsp;=&nbsp;window[vendors[x]+'RequestAnimationFrame'];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.cancelAnimationFrame&nbsp;=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window[vendors[x]+'CancelAnimationFrame']&nbsp;||&nbsp; window[vendors[x]+'CancelRequestAnimationFrame']; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!window.requestAnimationFrame)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.requestAnimationFrame&nbsp;=&nbsp;function(callback,&nbsp;element)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;currTime&nbsp;=&nbsp;new&nbsp;Date().getTime();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;timeToCall&nbsp;=&nbsp;Math.max(0,&nbsp;16&nbsp;-&nbsp;(currTime&nbsp;-&nbsp;lastTime));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;id&nbsp;=&nbsp;window.setTimeout(function()&nbsp;{&nbsp;callback(currTime&nbsp;+&nbsp;timeToCall);&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timeToCall); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastTime&nbsp;=&nbsp;currTime&nbsp;+&nbsp;timeToCall;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!window.cancelAnimationFrame)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.cancelAnimationFrame&nbsp;=&nbsp;function(id)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(id); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; }());