HTML5でアニメーション効果を実現する方法のまとめ_html5チュートリアルスキル

エディターは、HTML5 アニメーションを実装するための 3 つの方法を例として説明しています。アニメーションは、キャンバスだけでなく、CSS3 や JavaScript も使用できます。適切な選択を行うことで、最適な実装を実現できます。

追記: グラフィックス カード、記録フレーム間隔、および場合によってはコンピューターのプロセッサーが原因で、再生プロセスが少し滑らかでなかったり、歪んだりする可能性があります。
これは 3 つの方法で実装できます:
(1) JS と組み合わせた Canvas 要素
(2) 純粋な CSS3 アニメーション (IE などのすべての主流ブラウザではサポートされていません)
(3) CSS3 と Jquery の組み合わせ
CSS3 アニメーションの使用方法を知ることは、<canvas> 要素の使用方法を知ることよりも重要です。ブラウザはこれらの要素 (通常はスタイル) のパフォーマンスを最適化できるためです。 、CSS など）ですが、キャンバスを使用して描画をカスタマイズするために使用する効果は最適化できません。その理由もまた、ブラウザで使用されるハードウェアは主にグラフィックス カードの機能に依存するためです。現在、ブラウザではグラフィック カードに直接アクセスできません。たとえば、すべての描画操作では、まずブラウザ内の特定の関数を呼び出す必要があります。
1.canvas
html コード:

コードをコピー

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

canvas 要素を使用した HTML5 のアニメーション

お使いのブラウザは <canvas> 要素をサポートしていません。ブラウザの更新を検討してください。

遅い
再生
高速

< ;/body>

js コード:

いくつかの変数を定義します:

コードをコピー

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

var dx=5, //現在のレート

rate=1, //現在の再生速度

ani, //現在のアニメーション ループ
c, / /Drawing (Canvas Context)
w, //Car [hidden](Canvas Context)
grassHeight=130, //背景の高さ
carAlpha=0, //タイヤの回転角度
carX=- 400 , //車のx軸方向の位置（変更されます）
carY=300, //車のy軸方向の位置（一定になります）
carWidth= 400, //車の幅
carHeight=130, //車の高さ
tiresDelta=15, //1つのタイヤから最も近い車のシャーシまでの距離
axisDelta=20, / /車の下部シャーシの軸とタイヤの間の距離
radius=60 //タイヤの半径


;
車のキャンバス (最初は非表示) をインスタンス化するには、次の自己実行匿名関数を使用します

コードをコピー

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

(function(){

var car=document.createElement('canvas'); //要素を作成します

car.height=carHeight axisDelta 半径; //高さを設定
car.width=carWidth; //幅を設定


「再生」ボタンをクリックして、「車の描画」操作を一定の間隔で繰り返し実行することで「フレーム再生」機能をシミュレートします。

コードをコピー

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

function play(s){ //パラメータ s はボタンです if(ani){ //If aniは null ではありません、それは私たちを表します すでにアニメーションがあります clearInterval(ani) // したがって、それをクリアする必要があります (アニメーションを停止します)

ani=null;

s.innerHTML='Play' ; // ボタンの名前を「Play」に変更します

}else{
ani=setInterval(drawCanvas,40) // アニメーションを 25fps [フレーム/秒]、つまり 40/1000 に設定します。 -twenty-fifth
s.innerHTML='Pause' // ボタンの名前を「一時停止」に変更します
}
}


;
加減速は以下の方法で移動距離を変えることで実現します。

コードをコピー

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

関数スピード(デルタ){
var newRate=Math.max(レートデルタ,0.1)
dx=newRate/rate*dx;
}
ページ読み込みの初期化メソッド:
//init
function init(){
c=document.getElementById('canvas').getContext('2d');
drawCanvas(); ;
}

メインメソッド:

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

functiondrawCanvas (){
c.clearRect(0,0,c.canvas.width, c.canvas.height); //エラーを避けるためにキャンバス (表示) をクリアします。 /同様の「プッシュ」操作に対応する現在の座標値とステータスを保存します
drawGrass(); //背景を描画します
c.translate(carX,0); //開始点の座標を移動します
drawCar(); //車を描画します（非表示のキャンバス）
c.drawImage(w.canvas,0,carY) //最終的に表示される車を描画します
c.restore(); /キャンバスの状態を復元します。これは「ポップ」操作に似ています
carX =dx; //車の位置を X 軸方向にリセットして、前方に歩くことをシミュレートします
carAlpha =dx/ radius; //タイヤの角度を比例的に増加させます
if (carX>c.canvas.width){ //通常の境界条件を設定します
carX=-carWidth-10; //速度を dx に戻すこともできます*=-1;
}
}

背景を描画:

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

functiondrawGrass(){

//最初の 2 つのパラメーターはグラデーションの開始点の座標、最後の 2 つのパラメーターはグラデーションの終了点の座標です。
var grad=c。 createLinearGradient(0,c.canvas.height-grassHeight,0 ,c.canvas.height);
//線形グラデーションのグラデーション色を指定します。0 はグラデーションの開始色を表し、1 はグラデーションの終了色を表します
grad.addColorStop(0,'#33CC00');
grad.addColorStop(1,'#66FF22');
c.lineWidth=0; .fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);



車体を描画します:

コードをコピーします

コードは次のとおりです: functiondrawCar( ){ w.clearRect(0,0,w.canvas.width,w.canvas.height); //非表示のアートボードをクリアします

w.strokingStyle='#FF6600'; //境界線の色を設定します

w.lineWidth=2; //境界線の幅をピクセル単位で設定します

w.fillStyle='#FF9900' //塗りつぶしの色を設定します
w.beginPath( ); // 新しいパスの描画を開始します
w.rect(0,0,carWidth,carHeight); // 四角形を描画します
w.ストローク(); // 境界線を描画します
(); //背景を塗りつぶします
w.closePath(); //描画された新しいパスを閉じます
drawtire(tiresDelta radius,carHeight axisDelta) //最初のホイールの描画を開始します
drawtire(carWidth) -tiresDelta-radius,carHeight axisDelta); / /同様に、2 番目の
}



タイヤを描画します:

コードをコピー

コードは次のとおりです: functiondrawタイヤ(x,y){ w.save();

w.rotate(carAlpha); ;

w.lineWidth=1;

w.beginPath();
w.arc(0,0,radius,0,2*Math. PI,false );
w.closePath();
w.moveTo(radius,0); (-radius ,0);
w.closePath();
w.moveTo(0,radius); .lineTo( 0,-radius);
w.stop();



原理はシンプルで、コード内に詳細なコメントが付けられているので、ここでは一つ一つ説明しません。


2.CSS3


単一の JS コードなしで上記と同じアニメーション効果を完全に実現していることがわかります:

HTML コード:

コードをコピーします

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

シャーシ">

< div class="vr">

>

草">

CSS コード:
ボディ
{
パディング:0;
}



ボディとタイヤの回転のアニメーションを定義します (基本的にすべてのアニメーションには 4 つのバージョンの定義があることがわかります: ネイティブ バージョン/webkit[Chrome|Safari]/ms[IE10 との下位互換性のため]/moz[FireFox ])