JS等速運動のサンプルを詳しく解説

この記事では主に JS のユニフォーム モーションのサンプルについて詳しく説明します。まずは JS モーションの基本原理をご紹介します。

JS 移動の基本原理:

p を移動させるには、重要なのはオブジェクトの座標を変更することです

op.style.left=offsetLeft+speed+'px';

しかし、これは 1 回しか移動できません。タイマーの機能を使用して、そのような操作を許可してください。」動き始めてください。

setInterval(funtion(){
op.style.left=offsetLeft+speed+'px'; （speed是每次移动的像素）
},30)

この方法で運動はできますが、その効果は私たちが必要とするものではありません。ソース コードは次のとおりです。

移動するオブジェクトを停止するには: 重要なのは offsetLeft のサイズを決定し、タイマーをオフにすることです

var timer=null;
time=setInterval(function(){
                     if(op.offsetLeft>=300){
clearInterval(timer);
                         }else{
op.style.left=op.offsetLeft+10+‘px’；}
},30)这样还是有小瑕疵，就是多次点击造成的BUG，解决方法就是关闭上次的定时器：多加个clearInterval(timer)

関連する推奨事項:

ユニバーサル均一モーションを作成する方法フレームワーク

jsによる等速モーションの例解説

JavaScriptによる等速モーションと可変速(バッファ)モーションの詳しい紹介_基礎知識

以上がJS等速運動のサンプルを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。