實例講解使用SVG製作loading載入動畫的方法_html5教學技巧

今天和大家分享一個以SVG圖像為主的loading加載動畫，現在移動端網頁使用比較多，若還用GIF做loading圖片的話，可能會影響圖像的質量，所以使用SVG是一個不錯的方式。

這次展示的程式碼由 Aurer 編寫，前端人員只需要直接複製想要的SVG程式碼就能直接使用，而且可以改變顏色。當然，對於好學的同學，也可以研究下這個程式碼的寫法。

使用教學

接下來設計達人網小編為大家講解這個使用方法，其實是相當簡單的。

STEP 1: 複製你想要的SVG載入動畫程式碼到

裡面，小編隨意複製一個程式碼如下：

XML/HTML Code複製內容到剪貼簿

1. svg 版本=版本=版本 🎜> id="Layer_1" xmlns xmlns >"http://www.w3.org/2000/svg" xmlns:xlink="http:// www .w3.org/1999/xlink" x="0px" y="0px" 寬度="24px"  高度="30px" viewBox=「0 0 24 30」 樣式=「啟用背景：新0 xml:space="保留">  
2.    長方形 x y="0" 寬度 寬度寬度"4" 高度="10" 填🎜>=“#333” 變換=變換=
3. 變換=“翻譯” 🎜>>   animateTransform attributeType 🎜> 屬性名稱=「轉換」  🎜>「翻譯」 值=「0 0; 0 開始="0" 持續=持續== 0.6s" 重複次數="無限期">
4. 🎜>animateTransform>  
5. 長方形>   矩形 x="10"  y="0" 寬度 寬度寬度"4" 高度="10" 填🎜>=“#333” 變換
=變換=變換=“翻譯502111. 🎜>>  
6. animateTransform attributeType 🎜> 屬性名稱=「轉換」  🎜>「翻譯」 值=「0 0; 0 開始="0.2s" 持續= "0.6s" repeatCount="無限期">>
7. animateTransform>  
8. 長方形>   長方形 x=x=x=x=x=x=x=x=x y=
9. "0" 寬度 寬度寬度"4" 高度="10" 填🎜>=“#333” 變換=變換=變換=“翻譯”. 🎜>>   animateTransform attributeType 🎜> 屬性名稱=「轉換」  🎜>「翻譯」
 
10. 值=「0 0; 0 開始=
"0.4s"
11.  持續= "0.6s" 
repeatCount

=

"無限期"

>

>

1. animateTransform>
  
3. 長方形>  

svg>   此時程式碼已經可以帶動畫了，但沒有顏色，請繼續看STEP2添加顏色。 第2步：為SVG影像新增顏色 為你的樣式表加上以下樣式，裡面的顏色代碼換上你喜歡的即！ XML/HTML 程式碼將內容複製到剪貼簿 樣式>   svg 路徑，svg 矩形{填色：#FF6700;}    樣式>  

完成！最終DEMO：

ionic庫中的載入動畫使用
ionic是一個用來開發混合手機應用的，開源的，免費的程式碼庫。可以優化html、css和js的效能，建立高效的應用程序，而且還可以用於建立Sass和AngularJS的最佳化。 ionic會是一個可以信賴的框架。
安裝很簡單，如果有npm，Window 和Linux 上打開命令行工具執行以下命令：

複製代碼

程式碼如下:

$ npm install -g cordova ionic

Mac 系統上使用以下指令：

代碼代碼如下:

sudo npm install -g cordova ionic

提示: IOS需要在Mac Os X. 和Xcode環境下安裝使用。
如果你已經安裝了上述環境，可以執行以下指令來更新版本:

複製程式碼程式碼如下:

npm update -g cordova ionic

或

複製程式碼

複製程式碼

sudo npm update -g cordova ionic

下面我們來看看具體的兩個加載相關的用法：

ionic 載入動作 $ionicLoading

$ionicLoading 是 ionic 預設的一個載入互動效果。裡面的內容也是可以在模板裡面修改。

使用實例：

HTML 程式碼： XML/HTML Code

複製內容到剪貼簿

1. html ng-app >>     
2. 頭>       
3. 元 字符集 字符集 字符集 字符集
4.  字符集 字符集 字符集>       元 名稱
5. ="視口"
6.  內容=「初始規模=1，最大規模=1，使用者可擴充=否，寬度=裝置寬度「>                 
7. 標題
8. >離子莫代爾標題>           連結 href
9.  href rel="樣式表">       腳本 
10. src="http: / /www.runoob.com/static/ionic/js/ionic.bundle.min.js">腳本
11. >>      頭>  
12. body
13.  ng-controller= ">                 
ion-view 標題="首頁">
14.            離子標題欄>            h1 > 🎜>>布偶
15. h1>          
離子標題欄
16. >          離子含量 有標題 有標題有標題>  
17.           離子列表>  
18.             離子項目布偶中的布偶」 href=「#」>「#」>「#」>「#」> .name}}離子項目
>
19.              離子列表
>
20.            離子含量
>
21.  🎜>>         ion-view
22. > 
>
23.           身體
24. >   html

>

  

JavaScript 程式碼

JavaScript 程式碼

1. 將內容複製到剪切板
2. angular.module('ionicApp', ['ionic'])    .controller('AppCtrl', 
3. 函數($scope, $timeout, $ionicLoading) { 
4.      //設定載入器
5.   
6.   $ionicLoading.show({   
7.     內容：‘載入中’，       動畫：『淡入淡出-in
8. ‘，       showBackdrop: true
9. ,   
10.     最大寬度：200，  
11.     showDelay: 0   
12.   });   
13.         //設定一個逾時來清除載入程序，但實際上您會呼叫 $ionicLoading.hide(); 每當一切準備就緒或載入時都會呼叫該方法。
14.      $timeout(函數
15.  () {   
16.     $ionicLoading.hide();   
17.     $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name:'Curly'}];   
18.   }，2000）；   
19.      

});  

$ionicLoadingConfig

使用實例：

HTML 代碼

XML/HTML 程式碼將內容複製到剪貼簿

1. 離子含量 離子含量=="滾動="捲動假  類別
=
2. "有標題"> > 
>
3.  >    p>       
離子旋轉器
4.  圖標=" android ">離子旋轉器>       
離子旋轉器
5.  圖標=" ios ">離子旋轉器>       
離子旋轉器
6.  圖標=" ios -small">ion-spinner> 🎜> 🎜>     離子旋轉器 圖標
7. ="氣泡" 類="旋轉平衡">> 🎜>離子旋轉器>       離子旋轉器 
圖標
8. ="圓圈" 類=
"旋轉器通電"
9. >
>>
10. 離子旋轉器>     
11. p>        p>       離子旋轉器 圖標
12. ="新月"
13.  類="spinner-royal">>離子旋轉器>          離子旋轉器
 圖標="點" 類="旋轉深色">>> 離子旋轉器>  
14.     離子旋轉器 圖標=" lines " class="旋轉平靜"> 🎜>離子旋轉器>  
    
15. 離子旋轉器 圖示 圖示 圖示 " class="旋轉斷言">>
🎜>離子旋轉器
16. >       離子旋轉器 圖標="螺旋">
離子旋轉器
17. >     
p
18. >
  
  
20.   
離子含量

>

  

 CSS 代碼

CSS 代碼
1. 將內容複製到剪切板
2. 身體{      遊標: url('http://www.runob.com/try/demosource/finger .png'),
3. 自動;   
4. }       
5. p {      置中：
6. 居中;   ;      邊距底部：
7. 40px ！
8. 重要；   
9. }    .spinner svg {      
10. 寬度：19% ！ 重要；      高度：
11. 85px ！

重要

；   

}  

JavaScript 程式碼

1. JavaScript 程式碼 將內容複製到剪切板
3. angular.module('ionicApp', ['ionic'])      
4. .controller('MyCtrl', 
5. 函數($scope) {    

      });