2. 程式人生 > >HTML5 實現小車動畫效果(Canvas/CSS3/JQuery)

HTML5 實現小車動畫效果(Canvas/CSS3/JQuery)

阿新 • • 發佈：2019-01-04

HTML5正在變得越來越流行。在這個移動裝置日益增長的時代，對來自Adobe的Flash外掛的改造需求也正在快速增長。因為就在最近，Adobe宣佈Flash將不再支援移動裝置。這意味著，Adobe自身也認為對移動裝置來講HTML5是一項重要的技術。而桌面系統的改變也是遲早的事。

HTML的一大劣勢就是對於多媒體技術支援的缺乏。在HTML中，你無法直接顯示一個視訊或在螢幕上繪畫。在HTML5中，隨著<video>與<canvas>元素的引進。這些元素給予開發者直接使用“純粹的”HTML來實現多媒體技術的可能性——僅需要寫一些Javascript程式碼來配合HTML。在多媒體技術中，有一個基本的技術應該被支援——動畫。在HTML5中，有不少方式能夠實現該功能。

在這篇文章中，我僅將最新的<canvas>元素與即將到來的CSS3動畫技術進行比較。其他的可能性包括DOM元素或SVG元素的建立和動畫。這些可能性將不在本文中進行討論。從開始就應該注意到canvas技術在當前釋出的大部分主流瀏覽器都給予了支援，而CSS3動畫僅在最新的FireFox與Chrome瀏覽器中才有實現的可能，下一個版本的IE也將提供對CSS3動畫的支援。（所以本文中所有演示程式碼的效果，在Win 7系統下當前最新版的Chrome瀏覽器中都可實現，但在其他作業系統與其他瀏覽器中，並不一定能看到所有演示程式碼的效果）。

這裡我選擇了一個比較簡單的動畫：

PS：由於顯示卡、錄製的幀間隔，以及可能你電腦處理器的原因，播放過程可能有些不太流暢或者失真！

分三種方式實現：

(1)   canvas元素結合JS

(2)   純粹的CSS3動畫（暫不被所有主流瀏覽器支援，比如IE）

(3)   CSS3結合Jquery實現

知道如何使用CSS3動畫比知道如何使用<canvas>元素更重要：因為瀏覽器能夠優化那些元素的效能(通常是他們的樣式，比如CSS)，而我們使用canvas自定義畫出來的效果卻不能被優化。原因又在於，瀏覽器使用的硬體主要取決於顯示卡的能力。目前，瀏覽器沒有給予我們直接訪問顯示卡的權力，比如，每一個繪畫操作都不得不在瀏覽器中先呼叫某些函式。

讓我們從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;			//輪胎的半徑

為了例項化汽車canvas(初始時被隱藏)，我們使用下面的自執行的匿名函式

(function(){
		   var car=document.createElement('canvas');	//建立元素
		   car.height=carHeight+axisDelta+radius;	//設定高度
		   car.width=carWidth;				//設定寬度
		   w=car.getContext('2d');
		})();

點選“Play”按鈕，通過定時重複執行“畫汽車”操作，來模擬“幀播放”功能： 
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();

		}
由於原理簡單，並且程式碼中作了詳細註釋，這裡就不一一講解！

該是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;
	 }

定義車身與輪胎轉到的動畫（你會看到基本每一個動畫都有四個版本的定義：原生版本/webkit【Chrome|Safari】/ms【為了向後相容IE10】/moz【FireFox】） 
 /*定義動畫：從-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; }
	 }
 @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); }
	 }

 #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;
	 }

JQuery與CSS3合體

這是一個效果與相容性俱佳的方式（特別對於IE9暫不支援CSS3而言）

HTML程式碼（可以看到與CSS3中的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: 
<style>
         body
	 {
	    padding:0;
	    margin:0;
         }

	  #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軸)*/
	 }

	  /*車身*/
	 #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;
	    -o-transform:rotate(0deg);	/*旋轉(單位：度)*/
	    -ms-transform:rotate(0deg);
	    -webkit-transform:rotate(0deg);
	    -moz-transform:rotate(0deg);
	 }

	 #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;
	 }

      </style>

JS程式碼：

首先引入線上API：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

實現動畫程式碼（相當簡潔）：

<script>
         $(function(){
	     var rot=0;
	     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')));

	     var origin={		/*設定我們的起始點*/
		 left:-400
	     };

	     var animation={		/*該動畫由jQuery執行*/
		 left:1600		/*設定我們將移動到的最終位置*/
	 };

	     var rotate=function(){	/*該方法將被旋轉的輪子呼叫*/
		 rot+=2;
		 $('.tire').css(prefix,'rotate('+rot+'deg)');
	 };

	     var options={		/*將要被jQuery使用的引數*/
		 easing:'linear',	/*指定速度，此處只是線性，即為勻速*/
		 duration:10000,	/*指定動畫持續時間*/
		 complete:function(){
		    $('#car').css(origin).animate(animation,options);
		 },
		 step:rotate
	 };

	     options.complete();
	  });
      </script>

簡單講解：prefix首先識別出當前是哪個定義被採用了（-o?-moz?-webkit?-ms?），然後定義了動畫的起點位置和終點位置。接著，定義了設定旋轉角度的函式（該函式將在在動畫的每一步(step)中執行）。然後，定義了一個動畫，該定義方式導致了無限自迴圈呼叫！

本文，通過一個簡單的動畫例項，演示了HTML5下，實現動畫的幾種常見方式。


原始碼下載

相關推薦

HTML5 實現小車動畫效果(Canvas/CSS3/JQuery)

HTML5正在變得越來越流行。在這個移動裝置日益增長的時代，對來自Adobe的Flash外掛的改造需求也正在快速增長。因為就在最近，Adobe宣佈Flash將不再支援移動裝置。這意味著，Adobe自身也認為對移動裝置來講HTML5是一項重要的技術。而桌面系統的改變也是遲早的

html5+css3實現2D動畫效果演示

<span style="font-size:18px;">@charset "utf-8"; *{margin:0px;padding:0px;} figure{position:relative;width:33.33%;height:350px;overflow:hidden;float:l

CSS3 實現loading動畫效果

https://www.jianshu.com/p/55372466ce70   前幾篇介紹了CSS3的3個動畫屬性transform，transition，animation。但即使基本語法能看懂，也不代表能設計出棒棒的動畫效果。在設計這條路上，是學無止境，甚至需要拼天賦的。我也

canvas實現畫中畫動畫效果--網易娛樂年度盤點H5動畫解密

前言 由於本人最近在做一些 growth hacking 的工作，業務上以後可能也會涉及去做一些能夠在朋友圈火爆分享的 H5 頁面，突然想到去年看到一個網易娛樂年度新聞盤點的 H5 頁面非常的新穎，採用畫中畫的形式依次串聯十多個手繪娛樂圖片，加上洗腦的“好運來”音樂，讓人有很大的分享的慾望。 手機掃碼體驗

Cocos2d-x可以實現的動畫效果

動畫效果 ace 所在 nsh ans self 翻頁 led face 動作（Actions）move移動：moveto/moveby 從一個位置移動到另外一個位

使用animation替換background-image實現一些動畫效果

使用animation替換背景圖片來實現動畫效果時，如果直接替換背景圖片來實現，ie是不能相容的 比如： .d-pro1{ width: 641px; height: 767px; backgroun

簡單css實現3d動畫效果

知識儲備 transition: transform 10s; 過度的變形時間為10s transform-style: preserve-3d; 變形的樣式是3d變化 relative和absolute：相對定位和絕對定位 relative相對於原來文

D3.js實現帶動畫效果的柱狀圖

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content

使用Timer元件實現人物動畫效果

實現效果: 　　 知識運用： 　　Graphics類的DrawImage方法　　　　//在指定位置 按原始大小繪製指定的Image物件 　　public void DrawImage(Image image,Point point) 實現程式碼： private void t

《Angular2入門系列實踐》——實現頁面動畫效果

前言     在前端的路上越走越遠，也希望利用angular2使自己的頁面效果更加美觀，所以從官網上學習了一下 內容     1.寫animation.ts import { ani

Android屬性動畫上手實現各種動畫效果，自定義動畫，拋物線等

在上一篇Android基礎動畫,組合動畫，幀動畫，佈局動畫，Activity跳轉動畫中我寫了基礎動畫的用法，那麼這次我們來看Android屬性動畫上手實現各種效果,包括實現基本的透明度，縮放，平

wpf實現兩點動畫效果

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System

GCD延遲實現的動畫 效果

通過自身調自身這種方法實現的動畫經常出各種問題,現在改用GCD延遲下調自身這種方法： /**  *  動畫效果  */ //- (void)circularCharingAnimation //{

Cocos2d-x能夠實現的動畫效果

動作（Actions）move移動：moveto/moveby 從一個位置移動到另外一個位置 從一個位置移動多少數量級rotate旋轉：rotateto/rotateby 從一個角度旋轉到另外一個角度 旋轉多少個數量級scale縮放：scaleto/scaleby 放大縮小

HTML5實現刮獎效果

要實現刮獎效果，最重要的是要找到一種方法：當刮開上層的塗層是就能看到下層的結果。而HTML5的canvas API中有一個屬性globalCompositeOperation，這個屬性有多個值，而實現刮獎效果要用到的值就是destination-out。意思就是：在已有內

IOS 動畫設計(5)——用緩動函式實現物理動畫效果

1. 緩動函式簡介 (1) 緩動函式的動畫效果是建立在 CALayer 層級的關鍵幀動畫基礎之上的； (2) 緩動函式是一系列模擬物理效果（如拋物線）方程式的統稱，用以計算給定兩點之間的插值(即兩點間插入的關鍵幀)； (

使用CABasicAnimation實現的動畫效果（一）

這個動畫採用了CABasicAnimation和CAAnimationGroup來實現的，改變位置、改變大小、按鈕圓角數合在一起形成一個組合動畫。 原來是準備在CABasicAnimation中通過begintime來設定延時的效果，但效果不理想。 程式碼部分： 自定義按

JS實現倒計時動畫效果

window.onload = function(){ setInterval(FreeTime,1000); } function FreeTime(){ var curTime = Date.now();

vue+animate.css 手動掛載dom結構實現連續動畫效果

1、animate.css是一款前端動畫庫，有豐富的動畫效果，官網中相應的效果例子：https://daneden.github.io/animate.css/2、我們可以通過以下方式進行安裝：npm install animate.css --save-dev3、vue檔案

Android用兩張圖片實現簡單動畫效果

直接在java程式碼裡寫圖片佈局，而不用XML檔案。 先宣告定義： ImageView imageviewsudubg; ImageView imageviewsudu; LinearLayout l