JSモーションに関する知識のまとめ（弾性モーションの例付き）

JSモーションに関する知識のまとめ（弾性モーションの例付き）_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:21:13

オリジナル

1320 人が閲覧しました

この記事はJSスポーツに関する知識ポイントをまとめたものです。参考のために皆さんと共有してください。詳細は次のとおりです:

1. マルチオブジェクトモーションフレーム内のすべてを共有することはできません

2.document.title 出力頻度が高すぎることはできません

3. コンピューターの内部は実際に保存されているのではなくシミュレートされているため、JS を記述するときは小数点を記述しないようにしてください。

例: 0.07*100 は JS 操作では 7 ではありません

var a=3;
var b=3.00000000000000000001;
alert(a=b);

ログイン後にコピー

出力結果は true

4. プログラムを書くときは、最初に一般的なことを考えてから、具体的なことを考えてください。プログラムを書くときは、最初に特殊なものを削除してから、一般的なものを書きます。

if(特殊1)
{}
else if(特殊2)
{}
else
{
 一般
}

ログイン後にコピー

5. 配列の場合は、for ループまたは for..in ループを使用できます。for ループの方が制御しやすいため、for ループを使用することをお勧めします。

オブジェクト (json) の場合は、for..in ループのみを使用できます

6. CSS で *{margin:0;padding:0;} を記述するときのパフォーマンスはあまり良くありません

7. レイアウト変換、まず各要素の左と上の値を設定し、次に各要素の位置に絶対値を設定してマージンをクリアします

8. IE7 で UL を使用すると一時停止します。このとき、DIV

を使用してみてください。

9. 摩擦係数 iSpeed*0.95 を考慮します (小数点の大きさは摩擦の大きさによって異なります)

10. 加速度、ターゲットから離れるほど加速度は大きくなり、(iTarget-obj.offsetLeft)/50

11. 加速と摩擦のより良い組み合わせは 5 と 0.7、つまり iSpeed+=(iTarget-obj.offsetLeft)/5;

12. プログラムに問題があった場合は、なぜ問題が起こったのかを考えてみましょう

13. スタイルが境界を越えられない場合、弾性モーションは使用できません

14. 弾性運動の停止条件: 距離が近すぎ、速度が小さすぎる

15. スタイルでは小数点が自動的に無視されるため、分析は慎重に行う必要があります。したがって、不足している小数点が加算されないように、変数を設定してそれをスタイルに割り当てることができます。 obj.style.left=left+"px";

添付: JavaScript の弾性動作の例

運動原理:加速運動+減速運動+摩擦運動

コードは次のとおりです:

JavaScript モーションエフェクトに関連するその他のコンテンツについては、このサイトの特別トピック「

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  iSpeed += (iTarget - obj.offsetLeft)/5;
  iSpeed *= 0.7;
  left += iSpeed;
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
   clearInterval(obj.timer);
   obj.style.left = iTarget + 'px';
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>

ログイン後にコピー

JavaScript モーションエフェクトとテクニックの概要

」を参照してください。

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。