HTML5實現動畫三種方式

来源:http://www.cnblogs.com/zy-plan/archive/2016/02/27/5222992.html
-Advertisement-
Play Games

編者註：作者以一個運動的小車為例子，講述了三種實現HTML5動畫的方式，思路清晰，動畫不僅僅是canvas，還有css3和javascript.通過合理的選擇，來實現最優的實現。 PS：由於顯卡、錄製的幀間隔，以及可能你電腦處理器的原因，播放過程可能有些不太流暢或者失真！ 分三種方式實現： (1)


編者註：作者以一個運動的小車為例子，講述了三種實現HTML5動畫的方式，思路清晰，動畫不僅僅是canvas，還有css3和javascript.通過合理的選擇，來實現最優的實現。

HTML5實現動畫三種方式

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

分三種方式實現：

(1)   canvas元素結合JS

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

(3)   CSS3結合Jquery實現

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

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;			//輪胎的半徑

為了實例化汽車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();

		}

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

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

定義車身與輪胎轉到的動畫（你會看到基本每一個動畫都有四個版本的定義：原生版本/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;
	 }

3.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下，實現動畫的幾種常見方式。

原文：HTTP://blog.csdn.net/yanghua_kobe/article/details/7226816


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 《寫給大家看的設計書》讀書筆記（一）
    今天是我註冊博客園並開通博客的第一天，一直以來，潛水在博客園學習了很多技術，拷貝了很多大神的代碼，不算個鐵粉，怎麼著也是博客園的固定游客，工作5年了，學到了很多技術知識，交到了很多同事朋友，嘗到了很多人情冷暖，結了婚，生了娃，買了房，有了車，人生算是幸福美滿，跟老婆兩個人在同一家公司，拿著夠養活自己
  • .Net 大型分散式基礎服務架構橫向演變概述
    .Net 大型分散式基礎服務架構橫向演變概述,包含分散式任務調度，分散式配置中心，分散式消息隊列，分散式緩存平臺，分散式服務中心，分散式資料庫中間件平臺等基礎服務的演變說明。
  • 設計模式六大原則（6）：開閉原則
    我們用抽象構建框架，用實現擴展細節的註意事項而已：單一職責原則告訴我們實現類要職責單一；里氏替換原則告訴我們不要破壞繼承體系；依賴倒置原則告訴我們要面向介面編程；介面隔離原則告訴我們在設計介面的時候要精簡單一；迪米特法則告訴我們要降低耦合。而開閉原則是總綱，他告訴我們要對擴展開放，對修改關閉。
  • 模板方法模式
    重要程度：★★★☆☆ 一、什麼是模板方法模式 使用了JAVA的繼承機制，在抽象類中定義一個模板方法，該方法引用了若幹個抽象方法（由子類實現）或具體方法（子類可以覆蓋重寫）； 二、補充說明 其實就是JAVA的繼承以及抽象方法、重寫覆蓋的使用； 一般把模板方法定義成final避免被子類修改 三、角色 抽
  • 設計模式六大原則（5）：迪米特法則
    定義：一個對象應該對其他對象保持最少的瞭解。 問題由來：類與類之間的關係越密切，耦合度越大，當一個類發生改變時，對另一個類的影響也越大。 解決方案：儘量降低類與類之間的耦合。
  • 責任鏈模式
    重要程度：★★★☆☆ 一、什麼是責任鏈模式 為請求創建了一個接收者對象的鏈，每個接收者都包含對另一個接收者的引用，當某個接受者不能處理該請求時，會將該請求轉給下一個接受者處理； 二、補充說明 請求發送者與請求接受者解耦 應用例子：struts的攔截器，servlet的過濾器 三、角色 抽象請求處理者
  • 設計模式六大原則（3）：依賴倒置原則
    •低層模塊儘量都要有抽象類或介面，或者兩者都有。 •變數的聲明類型儘量是抽象類或介面。 •使用繼承時遵循里氏替換原則。
  • 深入理解CSS網頁佈局-理論篇
    在CSS網頁開發佈局中，需要對浮動和定位有深刻的理解才能在開發中游刃有餘。基於此，在博客園中做了本篇總結，這些總結來自實踐經驗和閱讀一些書籍後的理解總結。主要內容為浮動，清除浮動，定位。
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類