ホームページ > 記事 > ウェブフロントエンド > JSモーションに関する知識のまとめ（弾性モーションの例付き）_JavaScriptスキル
JSモーションに関する知識のまとめ（弾性モーションの例付き）_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:21:131261ブラウズ
この記事はJSスポーツに関する知識ポイントをまとめたものです。参考のために皆さんと共有してください。詳細は次のとおりです:
1. マルチオブジェクト モーション フレーム内のすべてを共有することはできません
2.document.title 出力頻度が高すぎることはできません
3. コンピューターの内部は実際に保存されているのではなくシミュレートされているため、JS を記述するときは小数点を記述しないようにしてください。
例: 0.07*100 は JS 操作では 7 ではありません
var a=3; var b=3.00000000000000000001; alert(a=b);
4. プログラムを書くときは、最初に一般的なことを考えてから、具体的なことを考えてください。プログラムを書くときは、最初に特殊なものを削除してから、一般的なものを書きます。
if(特殊1)
{}
else if(特殊2)
{}
else
{
一般
}
5. 配列の場合は、for ループまたは for..in ループを使用できます。for ループの方が制御しやすいため、for ループを使用することをお勧めします。
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 モーション エフェクトとテクニックの概要声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。