cari

Rumah >hujung hadapan web >Tutorial H5 >Contoh untuk menerangkan cara menggunakan SVG untuk mencipta kemahiran tutorial loading animation_html5

Contoh untuk menerangkan cara menggunakan SVG untuk mencipta kemahiran tutorial loading animation_html5

WBOY
WBOYasal
2016-05-16 15:45:223010semak imbas

Hari ini saya ingin berkongsi dengan anda animasi memuatkan berdasarkan imej SVG Pada masa kini, halaman web mudah alih kebanyakannya digunakan Jika anda juga menggunakan GIF untuk memuatkan imej, ia mungkin menjejaskan kualiti imej, jadi menggunakan SVG adalah cara yang baik.

Kod yang ditunjukkan kali ini ditulis oleh kakitangan bahagian hadapan hanya perlu menyalin terus kod SVG yang dikehendaki untuk menggunakannya secara terus, dan warna boleh ditukar. Sudah tentu, bagi pelajar yang bersemangat untuk belajar, anda juga boleh mempelajari prinsip penulisan kod ini.

Tutorial Penggunaan

Seterusnya, editor Design Expert Network akan menerangkan cara menggunakan ini sebenarnya agak mudah.

LANGKAH 1: Salin kod animasi pemuatan SVG yang anda mahu ke dalam . Editor boleh menyalin kod seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <svg versi="1.1"  id="Lapisan_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" x="0px" y="0px" lebar="24px"  tinggi="30px" viewBox="0 0 24 30" gaya="enable-background:new 0 0 50 50;" xml:space="pelihara">  
  2. <tepat x="0"  y="0" lebar="4" tinggi="10" isi ="#333" transformasi="terjemah(0 15.1665)" >  
  3. <animateTransform attributeType="xml"  nama atribut="transformasi" taip="terjemah" nilai="0 0; 0 20; 0 0" mulakan="0" dur=" 0.6s" reatCount="tak tentu">animateTransform>  
  4. betul>  
  5. <tepat x="10"  y="0" lebar="4" tinggi="10" isi ="#333" transformasi="terjemah(0 11.5002)" >  
  6. <animateTransform attributeType="xml"  nama atribut="transformasi" taip="terjemah" nilai="0 0; 0 20; 0 0" mulakan="0.2s" dur= "0.6s" repeatCount="tak tentu">animateTransform>  
  7. betul>  
  8. <tepat x="20"  y="0" lebar="4" tinggi="10" isi ="#333" transformasi="terjemah(0 1.83315)" >  
  9. <animateTransform attributeType="xml"  nama atribut="transformasi" taip="terjemah" nilai="0 0; 0 20; 0 0" mulakan="0.4s" dur= "0.6s" reatCount="tak tentu">animateTransform>  
  10. betul>  
  11. svg>  

此时代码已经可以带动画了，但没颜色，请继续看STEP2添加颜色。

LANGKAH 2 : 为SVG图像添加颜色

给你的样式表添加如下样式，里面的颜色代码换上你喜欢的即！

Kod XML/HTML复制内容到剪贴板
  1. <gaya>  
  2. laluan svg,svg rect{fill: #FF6700;}   
  3. gaya>  

Selesai! DEMO Akhir:
201645112526157.gif (500×250)

Animasi pemuatan dalam perpustakaan ionik digunakan
ionik ialah perpustakaan kod sumber terbuka percuma yang digunakan untuk membangunkan aplikasi mudah alih hibrid. Ia boleh mengoptimumkan prestasi html, css dan js, membina aplikasi yang cekap, dan juga boleh digunakan untuk membina pengoptimuman untuk Sass dan AngularJS. ionik akan menjadi rangka kerja yang boleh dipercayai.
Pemasangan sangat mudah jika anda mempunyai npm, buka alat baris arahan pada Windows dan Linux dan laksanakan arahan berikut:

Salin kod
Kodnya adalah seperti berikut:
$ npm install -g cordova ionic

Gunakan arahan berikut pada sistem Mac:

Salin Kod
Kod tersebut adalah seperti berikut:
sudo npm install -g cordova ionic

Petua: IOS perlu dipasang dan digunakan di bawah persekitaran Mac Os X. dan Xcode.
Jika anda telah memasang persekitaran di atas, anda boleh melaksanakan arahan berikut untuk mengemas kini versi:

Salin kod
Kod adalah seperti berikut :
kemas kini npm -g cordova ionik

atau

Salin kod
kod Seperti berikut:
sudo npm kemas kini -g cordova ionik

201645112554683.jpg (642×270)

Mari kita lihat dua penggunaan berkaitan pemuatan khusus:

tindakan pemuatan ionik $ionicLoading
$ionicLoading ialah kesan interaksi pemuatan lalai bagi ionik. Kandungan di dalam juga boleh diubah suai dalam templat.
Contoh penggunaan:
Kod HTML:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <html ng-app="ionicApp">  
  2.   <kepala>  
  3.     <meta charset="utf- 8">  
  4.     <meta nama="viewport"  kandungan="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width ">    
  5.        
  6.     <tajuk>Ionic Modaltajuk>  
  7.   
  8.      <pautan href="http: //www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">  
  9.     <skrip src="http: //www.runoob.com/static/ionic/js/ionic.bundle.min.js">skrip>  
  10.   kepala>  
  11. <badan ng-controller=" AppCtrl">  
  12.        
  13.       <pandangan ion tajuk=" Rumah">  
  14.         <ion-header-bar>  
  15.           <h1 kelas="tajuk >The Stoogesh1>  
  16.         ion-header-bar>  
  17.         <kandungan ion mempunyai pengepala="benar">  
  18.           <senarai ion>  
  19.              <item-ion ng-ulang==< >"stooge in stooges" href="#">{ {stooge.name}}item-item>  
  20.           senarai ion>  
  21.         kandungan ion>  
  22.       pandangan ion>  
  23.        
  24.   badan>  
  25. html>  

JavaScript 代码
Kod JavaScript复制内容到剪贴板
  1. angular.module(‘ionicApp‘, [‘ionic‘])   
  2. .controller(‘AppCtrl‘, fungsi($skop, $masa tamat, $ionicLoading) {   
  3.   
  4.   // Sediakan pemuat   
  5.   $ionicLoading.show({   
  6.     kandungan: ‘Memuatkan‘,   
  7.     animasi: ‘pudar-dalam‘,   
  8.     showLatar Belakang: benar,   
  9.     Lebar maksimum: 200,   
  10.     Tayangan Kelewatan: 0   
  11.   });   
  12.      
  13.   // Tetapkan tamat masa untuk kosongkan pemuat, namun anda sebenarnya  memanggil  $ionicLoading.hide(); kaedah apabila semua sedia atau dimuatkan.   
  14.   $masa tamat(fungsi () {   
  15.     $ionicLoading.hide();   
  16.     $scope.stooges = [{name: ‘Moe‘}, {name: ‘Larry‘}, {name: ‘Curly‘}];   
  17.   }, 2000);   
  18.      
  19. });  


$ionicLoadingConfig

使用实例：

HTML 代码
Kod XML/HTML复制内容到剪贴板
  1. <kandungan ion tatal="palsu" kelas="has-header">  
  2.   <p>  
  3.     <ikon-pemutar ikon=" android">ion-spinner>  
  4.     <ikon-pemutar ikon=" ios">pemutar ion>  
  5.     <ikon-pemutar ikon=" ios-small">ion-spinner>  
  6.     <ikon-pemutar ikon=" buih" kelas="pemutar-seimbang">pemutar ion>  
  7.     <ikon-pemutar ikon=" kalangan" kelas="bertenaga pemutar">pemutar ion>  
  8.   p>  
  9.   
  10.   <p>  
  11.     <ikon-pemutar ikon=" bulan sabit" kelas="spinner-royal">pemutar ion>  
  12.   
  13.     <ikon-pemutar ikon=" titik" kelas="pemutar-gelap">pemutar ion>  
  14.     <ikon-pemutar ikon=" garisan" kelas="pemutar-tenang">pemutar ion>  
  15.     <ikon-pemutar ikon=" riak" kelas="pemutar-tegas">pemutar ion>  
  16.     <ikon-pemutar ikon=" lingkaran">pemutar ion>  
  17.   p>  
  18.   
  19.   
  20. kandungan ion>  

 
CSS 代码

Kod CSS复制内容到剪贴板
  1. badan {   
  2.   kursor: url('http://www.runob.com/try/demo_source/finger .png'), auto;   
  3. }       
  4. p {   
  5.   selaraskan teks: tengah;   
  6.   margin-bawah: 40px !penting;   
  7. }   
  8. .spinner svg {   
  9.   lebar: 19% !penting;   
  10.   tinggi: 85px !penting;   
  11. }  

JavaScript 代码

Kod JavaScript复制内容到剪贴板
  1. angular.module(‘ionicApp‘, [‘ionic‘])   
  2.   
  3. .controller(‘MyCtrl‘, fungsi($skop) {    
  4.      
  5. });  
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis mendalam tentang kaedah mengawal transformasi matriks grafik dalam kemahiran tutorial HTML5 Canvas_html5Artikel seterusnya：Analisis mendalam tentang kaedah mengawal transformasi matriks grafik dalam kemahiran tutorial HTML5 Canvas_html5

Artikel berkaitan

Lihat lagi