HTML5_html/css_WEB-ITnose でアニメーションを実装する 3 つの方法-htmlチュートリアル-php.cn

編集者注: 著者は、HTML5 アニメーションを実装するための 3 つの方法を例として説明しています。アニメーションは、適切な選択を通じて、CSS3 と JavaScript によっても実現されます。

PS: グラフィックスカード、記録フレーム間隔、および場合によってはコンピューターのプロセッサーが原因で、再生プロセスが多少滑らかでなかったり、歪んだりする可能性があります。

3 つの方法で実現:

(1) Canvas 要素と JS

の組み合わせ

(2) 純粋な CSS3 アニメーション (IE などのすべての主流ブラウザではサポートされていません)

(3) CSS3 と Jquery を組み合わせて

CSS3 アニメーションの使用方法を知ることは、

1.canvas

html コード:

<html>   <head>      <meta charset="UTF-8" />         <title>Animation in HTML5 using the canvas element</title>    </head>   <body onload="init();">      <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>      <div id="controls">         <button type="button" onclick="speed(-0.1);">Slower</button>         <button type="button" onclick="play(this);">Play</button>	 <button type="button" onclick="speed(+0.1)">Faster</button>      </div>   </body></html>

ログイン後にコピー

js コード:

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

var dx=5,			//当前速率		    rate=1,			//当前播放速度		    ani,			//当前动画循环		    c,				//画图(Canvas Context)		    w,				//汽车[隐藏的](Canvas Context)		    grassHeight=130,		//背景高度		    carAlpha=0,			//轮胎的旋转角度		    carX=-400,			//x轴方向上汽车的位置(将被改变)		    carY=300,			//y轴方向上汽车的位置(将保持为常量)		    carWidth=400,		//汽车的宽度		    carHeight=130,		//汽车的高度		    tiresDelta=15,		//从一个轮胎到最接近的汽车底盘的距离		    axisDelta=20,		//汽车底部底盘的轴与轮胎的距离		    radius=60;			//轮胎的半径

ログイン後にコピー

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

(function(){		   var car=document.createElement('canvas');	//创建元素		   car.height=carHeight+axisDelta+radius;	//设置高度		   car.width=carWidth;				//设置宽度		   w=car.getContext('2d');		})();

ログイン後にコピー

「」をクリック「再生」ボタンは、スケジュールされた時刻に「車を描く」操作を繰り返し実行することで「フレーム再生」機能をシミュレートします。

function play(s){				//参数s是一个button		   if(ani){					//如果ani不为null，则代表我们当前已经有了一个动画		      clearInterval(ani);			//所以我们需要清除它(停止动画)		      ani=null;							      s.innerHTML='Play';			//重命名该按钮为“播放”		   }else{		      ani=setInterval(drawCanvas,40);		//我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一		      s.innerHTML='Pause';			//重命名该按钮为“暂停”		   }		}

ログイン後にコピー

加速と減速は、次の方法で移動距離の大きさを変更することで実現されます。

function speed(delta){		   var newRate=Math.max(rate+delta,0.1);		   dx=newRate/rate*dx;		   rate=newRate;		}

ログイン後にコピー

初期化メソッドページ読み込みの方法：

//init	    	function init(){		   c=document.getElementById('canvas').getContext('2d');		   drawCanvas();		}

ログイン後にコピー

メイントーンメソッド：

function drawCanvas(){		   c.clearRect(0,0,c.canvas.width, c.canvas.height);	//清除Canvas(已显示的)，避免产生错误		   c.save();						//保存当前坐标值以及状态，对应的类似“push”操作		   drawGrass();						//画背景		   c.translate(carX,0);					//移动起点坐标		   drawCar();						//画汽车(隐藏的canvas)		   c.drawImage(w.canvas,0,carY);			//画最终显示的汽车		   c.restore();						//恢复Canvas的状态，对应的是类似“pop”操作		   carX+=dx;						//重置汽车在X轴方向的位置，以模拟向前走		   carAlpha+=dx/radius;					//按比例增加轮胎角度		   if(carX>c.canvas.width){				//设置某些定期的边界条件		      carX=-carWidth-10;				//也可以将速度反向为dx*=-1;		   }		}

ログイン後にコピー

背景描画：

function drawGrass(){		   //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标		   var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);		   //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色		   grad.addColorStop(0,'#33CC00');		   grad.addColorStop(1,'#66FF22');		   c.fillStyle=grad;  	 	   c.lineWidth=0;		   c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);		   		}

ログイン後にコピー

本体描画：

function drawCar(){		   w.clearRect(0,0,w.canvas.width,w.canvas.height);		//清空隐藏的画板		   w.strokeStyle='#FF6600';					//设置边框色  		   w.lineWidth=2;						//设置边框的宽度，单位为像素		   w.fillStyle='#FF9900';					//设置填充色		   w.beginPath();						//开始绘制新路径		   w.rect(0,0,carWidth,carHeight);				//绘制一个矩形		   w.stroke();							//画边框		   w.fill();							//填充背景		   w.closePath();						//关闭绘制的新路径		   drawTire(tiresDelta+radius,carHeight+axisDelta);		//我们开始画第一个轮子		   drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);	//同样的，第二个		   		}

ログイン後にコピー

タイヤ描画：

function drawTire(x,y){		   w.save();		   w.translate(x,y);		   w.rotate(carAlpha);		   w.strokeStyle='#3300FF';		   w.lineWidth=1;		   w.fillStyle='#0099FF';		   w.beginPath();		   w.arc(0,0,radius,0,2*Math.PI,false);		   w.fill();		   w.closePath();		   w.beginPath();		   w.moveTo(radius,0);		   w.lineTo(-radius,0);		   w.stroke();		   w.closePath();		   w.beginPath();		   w.moveTo(0,radius);		   w.lineTo(0,-radius);		   w.stroke();		   w.closePath();		   w.restore();		}

ログイン後にコピー

原理は簡単で詳細なコメントはコード内にあるので説明は省略しますここで一つずつ！

2.CSS3

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

HTML コード:

<html>   <head>      <meta charset="UTF-8" />      <title>Animations in HTML5 using CSS3 animations</title>       </head>   <body>      <div id="container">	  <div id="car">	     <div id="chassis"></div>	     <div id="backtire" class="tire">		 <div class="hr"></div>		 <div class="vr"></div>	     </div>	     <div id="fronttire" class="tire">		 <div class="hr"></div>		 <div class="vr"></div>	     </div>		  </div>	  <div id="grass"></div>      </div>      <footer></footer>   </body></html>

ログイン後にコピー

CSS コード:

 body	 {	    padding:0;	    margin:0;	 }

ログイン後にコピー

ボディとタイヤの回転のアニメーションを定義します。 (基本的にすべてのアニメーションには 4 つのバージョンの定義があることがわかります: ネイティブバージョン/webkit[Chrome|Safari]/ms[IE10 との下位互換性のため]/moz[FireFox])これは効果と互換性が高い方法です (特に IE9 はまだ CSS3 をサポートしていないため)

HTML コード (CSS3 の HTML コードと何ら変わらないことがわかります):

 /*定义动画：从-400px的位置移动到1600px的位置 */	 @keyframes carAnimation	 {	    0% { left:-400px; }		/* 指定初始位置，0%等同于from*/	    100% { left:1600px; }	/* 指定最终位置,100%等同于to*/	 }	 /* Safari and Chrome */	 @-webkit-keyframes carAnimation	 {	    0% {left:-400px; }	    100% {left:1600px; }	 }	 /* Firefox */	 @-moz-keyframes carAnimation	 {	    0% {left:-400; }	    100% {left:1600px; } 	 }	 /*IE暂不支持,此处定义是为了向后兼容IE10*/	 @-ms-keyframes carAnimation	 {	    0% {left:-400px; }	    100%{left:1600px; }	 }

ログイン後にコピー

CSS:

 @keyframes tyreAnimation	 {	    0% {transform: rotate(0); }	    100% {transform: rotate(1800deg); }	 }	 @-webkit-keyframes tyreAnimation	 {	    0% { -webkit-transform: rotate(0); }	    100% { -webkit-transform: rotate(1800deg); }	 }	 @-moz-keyframes tyreAnimation	 {	    0% { -moz-transform: rotate(0); }	    100% { -moz-transform: rotate(1800deg); }	 }	 @-ms-keyframes tyreAnimation	 {	    0% { -ms-transform: rotate(0); }	    100% { -ms-transform: rotate(1800deg); }	 }

ログイン後にコピー

JS code :

最初にオンライン API を紹介します:

 #container	 {	    position:relative;	    width:100%;	    height:600px;	    overflow:hidden;		/*这个很重要*/	 }	 #car	 {	    position:absolute; 		/*汽车在容器中采用绝对定位*/	    width:400px;	    height:210px;		/*汽车的总高度，包括轮胎和底盘*/	    z-index:1;			/*让汽车在背景的上方*/	    top:300px;			/*距顶端的距离(y轴)*/	    left:50px;			/*距左侧的距离(x轴)*/	    /*以下内容赋予该元素预先定义的动画及相关属性*/	    -webkit-animation-name:carAnimation;		/*名称*/	    -webkit-animation-duration:10s;			/*持续时间*/	    -webkit-animation-iteration-count:infinite;		/*迭代次数-无限次*/	    -webkit-animation-timing-function:linear;		/*播放动画时从头到尾都以相同的速度*/	    -moz-animation-name:carAnimation;		/*名称*/	    -moz-animation-duration:10s;			/*持续时间*/	    -moz-animation-iteration-count:infinite;		/*迭代次数-无限次*/	    -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;		/*名称*/	    animation-duration:10s;			/*持续时间*/	    animation-iteration-count:infinite;		/*迭代次数-无限次*/	    animation-timing-function:linear;		/*播放动画时从头到尾都以相同的速度*/	 }	 /*车身*/	 #chassis	 {	    position:absolute;	    width:400px;	    height:130px;	    background:#FF9900;	    border: 2px solid #FF6600;	 }		 /*轮胎*/	 .tire	 {	    z-index:1;			/*同上，轮胎也应置于背景的上方*/	    position:absolute;	    bottom:0;	    border-radius:60px;		/*圆半径*/	    height:120px;		/* 2*radius=height */	    width:120px;		/* 2*radius=width */	    background:#0099FF;		/*填充色*/	    border:1px solid #3300FF;	    -webkit-animation-name:tyreAnimation;	    -webkit-animation-duration:10s;	    -webkit-animation-iteration-count:infinite;	    -webkit-animation-timing-function:linear;	    -moz-animation-name:tyreAnimation;	    -moz-animation-duration:10s;	    -moz-animation-iteration-count:infinite;	    -moz-animation-timing-function:linear;	    -ms-animation-name:tyreAnimation;	    -ms-animation-duration:10s;	    -ms-animation-iteration-count:infinite;	    -ms-animation-timing-function:linear;	    	    animation-name:tyreAnimation;	    animation-duration:10s;	    animation-iteration-count:infinite;	    animation-timing-function:linear;	 }	 #fronttire	 {	    right:20px;		/*设置右边的轮胎距离边缘的距离为20*/	 }	 #backtire	 {	    left:20px;		/*设置左边的轮胎距离边缘的距离为20*/	 }	 #grass	 {	    position:absolute;	/*背景绝对定位在容器中*/	    width:100%;	    height:130px;	    bottom:0;	    /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */	    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	 {	    position:absolute;	    background:#3300FF;	 }	 .hr	 {	    height:1px;	    width:100%;		/*轮胎的水平线*/	    left:0;	    top:60px;	 }	 .vr	 {	    width:1px;	    height:100%;	/*轮胎的垂直线*/	    left:60px;	    top:0;	 }

ログイン後にコピー

アニメーションコードを実装します (非常に簡潔):

<html>   <head>      <meta charset="UTF-8" />      <title>Animations in HTML5 using CSS3 animations</title>       </head>   <body>      <div id="container">	  <div id="car">	     <div id="chassis"></div>	     <div id="backtire" class="tire">		 <div class="hr"></div>		 <div class="vr"></div>	     </div>	     <div id="fronttire" class="tire">		 <div class="hr"></div>		 <div class="vr"></div>	     </div>		  </div>	  <div id="grass"></div>      </div>      <footer></footer>   </body></html>

ログイン後にコピー

簡単な説明: プレフィックスは最初に現在使用されている定義を識別します (-o?-moz?-webkit? -ms?)。次に、アニメーションの開始位置と終了位置を定義します。次に、回転角度を設定する関数が定義されます (この関数はアニメーションの各ステップで実行されます)。次に、無限の自己ループ呼び出しが発生する方法でアニメーションが定義されます。

この記事では、簡単なアニメーションの例を通じて、HTML5 でアニメーションを実装する一般的な方法をいくつか示します。