ホームページ > 記事 > ウェブフロントエンド > jsでバッファリングモーションを実装する方法（コード例）
jsでバッファリングモーションを実装する方法（コード例）
- 不言オリジナル
- 2018-08-31 10:25:001203ブラウズ
この記事の内容は、js でのバッファリング動作の実装方法 (コード例) です。必要な方は参考にしていただければ幸いです。
バッファリングモーションの特徴
徐々に遅くなり、最終的に停止します
距離が遠いほど速度が大きくなります
速度は距離によって決まります
速度=(目標値 - 現在の値) / スケーリング係数
素晴らしい距離と素晴らしいスピード。
距離が短く、速度も小さい。
速度は距離に正比例します。
速度が 0.9 の場合、速度は四捨五入されずに四捨五入される必要があります。速度が 0 より大きい場合は四捨五入され、0 より小さい場合は四捨五入されます。下。
次に、div が 0 から 300 に移動するバッファリング モーションと、div が 600 から 300 に移動するバッファリング モーションを作成します。
バッファリング モーションを実装するコード
<!DOCTYPE html>
<html>
<head>
<title>缓冲运动</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
/* left: 0; */
left: 600px;
top: 50px;
}
#div2{
/* 300位置的参考线 */
width: 1px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
background: #000;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
startMove();
}
}
function startMove(){
var oDiv=document.getElementById("div1");
setInterval(function(){
var speed=(300-oDiv.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
oDiv.style.left=oDiv.offsetLeft+speed+"px";
},30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始运动" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>関連する推奨事項:
JS モーション バッファリング エフェクトのカプセル化関数を使用する方法
JS でマルチオブジェクト バッファリング モーションを実装するサンプル コード_JavaScript スキル
以上がjsでバッファリングモーションを実装する方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。