ホームページ > 記事 > ウェブフロントエンド > HTML5でアニメーション効果を実現する方法のまとめ_html5チュートリアルスキル

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

WBOYオリジナル: 2016-05-16 15:45:591606ブラウズ

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

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

コードをコピー

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

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

< ;/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 コード:

コードをコピーします

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

CSS3 アニメーションを使用したアニメーション

シャーシ">

< div class="vr">

>

草">

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

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

コードをコピーします

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

/*アニメーションの定義: -400px の位置から 1600px の位置に移動*/
@keyframes carAnimation
{
0% { left:-400px } /* 初期位置を指定します。 0% は from*/
100% { left:1600px; } /* 最終位置を指定し、100% は to*/
}
/* Safari および Chrome */
@ -webkit-keyframes carAnimation
{
0% {left:-400px; }
100% {left:1600px; }
/* Firefox */
@ -moz -keyframes carAnimation
{
0% {left:-400; }
100% {left:1600px; }
/*この定義はまだサポートされていません。 IE10 との下位互換性があります*/
@-ms-keyframes carAnimation
{
0% {left:-400px; }
100%{left:1600px; }
} tyreAnimation
{
0% {transform: 回転(0); }
100% {transform: 回転(1800 度) }
}
@-webkit-keyframes tyreAnimation
{
0% { -webkit-transform: 回転(0); }
100% { -webkit-transform: 回転(1800度); }
}
@-moz-keyframes tyreAnimation
{
0% { -moz-transform: 回転(0); }
100% { -moz-transform: 回転(1800度); }
}
@-ms-keyframes tyreAnimation
{
0% { -ms-transform: 回転(0); }
100% { -ms-transform: 回転(1800 度); }
} #コンテナ
{
位置:relative;
width:100%;
height:600px; /*これは非常に重要です*/
}
#car
:absolute; / *車はコンテナ内に絶対的に配置されます*/
width:400px
height:210px; /*タイヤとシャーシを含む車の全高*/
z-index; :1; /*車を背景の上に置きます*/
top:300px; /*上からの距離 (y 軸)*/
left:50px; /
/* 次のコンテンツは、要素に事前定義されたアニメーションと関連属性を提供します*/
-webkit-animation-name:carAnimation; /*name*/
-webkit-animation-duration:10s; duration*/
-webkit-animation-iteration-count:infinite; /*反復回数-infinite*/
-webkit-animation-timing-function:linear; /*最初から同じ速度でアニメーションを再生します終了* /
-moz-animation-name:carAnimation; /*name*/
-moz-animation-duration:10s; /*duration*/
-moz-animation-iteration-count:無限; /*反復回数 - 無制限*/
-moz-animation-timing-function:linear; /*最初から最後まで同じ速度でアニメーションを再生します*/
-ms-animation-name:carAnimation ; /*名前*/
-ms-animation-duration:10s; /*期間*/
-ms-animation-iteration-count:infinite; /*反復回数-無限*/
- ms-animation-timing-function:linear; /*最初から最後まで同じ速度でアニメーションを再生します*/
animation-name:carAnimation; /*Name*/
animation-duration:10s; */
animation-iteration-count:infinite; /*反復回数-無限*/
animation-timing-function:linear; /*最初から最後まで同じ速度でアニメーションを再生します*/
}
/*body*/
#chassis
{
位置:絶対;
高さ:130px;
border: 2px Solid
}
/*tire*/
.tire
{
z-index:1; /*上記と同様に、タイヤも配置する必要があります。上の背景*/
position:absolute;
border-radius:60px; /* 2*radius=height */
width:120px; /* 2*radius=width */
background:#0099FF; /*fill color*/
border:1px ソリッド
-webkit-animation-name:タイヤアニメーション ;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;名前:tyreAnimation;
-moz-animation-duration:10s;
-moz-animation-timing-function:linear;アニメーション -name:tyreAnimation;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear; - 名前:タイヤアニメーション;
アニメーション期間:10 秒;
アニメーションタイミング関数:リニア;
#fronttire
🎜 >right:20px; /*右タイヤとエッジの間の距離を 20 に設定します*/
}
#backtire
{
left:20px;タイヤとエッジを 20*/
}
#grass
{
position:absolute; /*背景はコンテナ内に絶対配置されます*/
width:100%; >height:130px;
bottom:0;
/*背景色を直線的にグラデーションにし、下はグラデーションの開始点を表し、最初の色の値がグラデーションの開始値になります。は終了値です*/
background:linear-grdaient(bottom,#33CC00,#66FF22);
background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);
background: -moz-linear-gradient(bottom, #33CC00,#66FF22);
background:-ms-linear-gradient(bottom,#33CC00,#66FF22);
.hr,.vr
{
位置:絶対 ;
背景:#3300FF;
.hr
{
高さ:1px; /*水平線タイヤの*/
左:0 ;
上:60px;
.vr
{
幅:1px;
高さ:100%; /*タイヤの縦線*/
上:0; >

3.JQuery と CSS3

これは、優れた効果と互換性を持つメソッドです (特に IE9 はまだ CSS3 をサポートしていないため) HTML コード (次のことができます) CSS3 の HTML コードと変わらないことを確認してください):

コードをコピーします

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

CSS3 アニメーションを使用した HTML5 のアニメーション< /title> </div><body> <div class="msgborder" id="phpcode27"><div id="car"> id=" シャーシ"></div> <br><div id="backtire" class="タイヤ"> <br><div class="hr"></div> ><div class="vr"></div> <br></div> <br><div id="fronttire"<div> "hr" > </div> <br> <div class="vr"> <br> </div> <br> id="草"</div> <br><フッター></フッター> <br></html> >CSS: <br><style> <br>body <br>{ <br>margin:0; <br>} <br>#container <br>{ <br>position:相対; <br>width:100%; <br>height:600px; <br>overflow:hidden; /*これは非常に重要です*/ <br>} <br>#car <br>位置: Absolute; /* 車はコンテナ内に絶対的に配置されます*/ <br>width:400px <br>height:210px; /*タイヤとシャーシを含む車の全高*/ <br>z-index: 1; /*車を背景の上に置きます*/ <br>top:300px; /*上からの距離 (y 軸)*/ <br>left:50px; axis)*/ <br>} <br>/*Body*/ <br>#chassis <br>{ <br>位置:絶対; <br>高さ:130px; :#FF9900; <br>border: 2px ソリッド <br>} <br>/*tire*/ <br>.tire <br>{ <br>z-index:1;タイヤも背景の上に配置する必要があります*/ <br>position:absolute; <br>border-radius:60px; /*circle radius*/ <br>height:120px; *radius=height */ <br>width:120px; /* 2*radius=width */ <br>background:#0099FF; /*fill color*/ <br>border:1px ソリッド <br>- o-transform:rotate(0deg); /*rotate(単位: 度)*/ <br>-ms-transform:rotate(0deg); <br>-webkit-transform:rotate(0deg); -transform:rotate(0deg); <br>} <br>#fronttire <br>{ <br>right:20px; /*右タイヤとエッジの間の距離を 20 に設定します*/ <br>} <br>#backtire <br>{ <br>left:20px; / *左タイヤとエッジの間の距離を 20 に設定します*/ <br>} <br>#grass <br>{ <br>position:absolute; /*背景はコンテナ内に絶対に配置されます*/ <br>width:100% ; <br>height:130px; <br>bottom:0; <br>/*背景色を直線的にグラデーションします。グラデーションの開始点、最初のカラー値はグラデーションの開始値、2 番目のカラー値は終了値です*/ <br>background:linear-grdaient(bottom,#33CC00,#66FF22);背景:-webkit-linear-gradient(bottom,#33CC00,#66FF22); <br>背景:-moz-linear-gradient(bottom,#33CC00,#66FF22); (下,#33CC00,#66FF22); <br>} <br>.hr,.vr <br>{ <br>位置:絶対; <br>} <br>.hr <br>{ <br>高さ:1px; <br>幅:100%; /* 水平線 */ <br>上:60px; >{ <br>幅:1px; <br>高さ:100%; /*縦線*/ <br>上:0; <br></style> 🎜><br><br> <br><br>JS コード: <br><br>まずオンライン API を紹介します: <br><br><br><br><br><br>コードをコピー<br><br><br>コードは次のとおりです:<br><br><br><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></スクリプト><br /><br /><br /> <br />アニメーションコードを実装します (非常に簡潔): <br /><br /><br /><br /><br /><br />コードをコピーします<br /><br /><br />コードは次のとおりです:</div><div class="msgborder" id="phpcode29"><br /><script> <br>$(function(){ <br>var rot=0; <br>var prefix=$('.tire').css('-o-transform') ?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform ')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform'))); /*開始点を設定します*/ <br>left:-400 <br>}; <br>var anime={ /*アニメーションは jQuery によって実行されます*/ <br>left:1600 /*開始位置を設定します最終位置に移動*/ <br>}; <br>varrotate=function(){ /*このメソッドは回転されたホイールによって呼び出されます*/ <br>rot =2>$('.tire '). css(prefix,'rotate(' rot 'deg)'); <br>} <br>var options={ /*jQuery で使用するパラメータ*/ <br>easing:'linear', / *速度を指定します。ここでは単なる線形、つまり均一速度です*/ <br>duration:10000, /*アニメーション期間を指定*/ <br>complete:function(){ <br>$('#car') .css(origin) .animate(animation,options); <br>step:rotate <br>});スクリプト> <br> <br><br> <br>簡単な説明: プレフィックスは、まず現在使用されている定義 (-o?-moz?-webkit?-ms?) を識別し、次にアニメーションの開始位置と終了位置を定義します。次に、回転角度を設定する関数が定義されます (この関数はアニメーションの各ステップで実行されます)。次に、無限の自己ループ呼び出しが発生する方法でアニメーションが定義されます。 <br>この記事では、簡単なアニメーションの例を通じて、HTML5 でアニメーションを実装する一般的な方法をいくつか示します。 <br><br> </div> </div> </div> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="HTML5 のいくつかの新機能と Canvas_html5 チュートリアルスキルの共通属性を整理する" href="http://m.php.cn/ja/faq/5654.html">HTML5 のいくつかの新機能と Canvas_html5 チュートリアルスキルの共通属性を整理する</a></span><span>次の記事：<a class="dBlack" title="HTML5 のいくつかの新機能と Canvas_html5 チュートリアルスキルの共通属性を整理する" href="http://m.php.cn/ja/faq/5656.html">HTML5 のいくつかの新機能と Canvas_html5 チュートリアルスキルの共通属性を整理する</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348281.html" title="AlloyTouch 全画面スクロールプラグインは 30 秒で滑らかな H5 ページを作成します" class="aBlack">AlloyTouch 全画面スクロールプラグインは 30 秒で滑らかな H5 ページを作成します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348372.html" title="HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）" class="aBlack">HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348373.html" title="HTML5 Canvas 9での画像描画例を詳しく解説" class="aBlack">HTML5 Canvas 9での画像描画例を詳しく解説</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348374.html" title="正規表現と新しい HTML5 要素" class="aBlack">正規表現と新しい HTML5 要素</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348469.html" title="NodeJS と HTML5 を組み合わせて複数のファイルをドラッグアンドドロップしてサーバーにアップロードする方法" class="aBlack">NodeJS と HTML5 を組み合わせて複数のファイルをドラッグアンドドロップしてサーバーにアップロードする方法</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>