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

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

WBOY

Lepaskan： 2016-05-16 15:45:22

asal

3012 orang telah melayarinya

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

<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">
<tepat x="0" y="0" lebar="4" tinggi="10" isi ="#333" transformasi="terjemah(0 15.1665)" >
<animateTransform attributeType="xml" nama atribut="transformasi" taip="terjemah" nilai="0 0; 0 20; 0 0" mulakan="0" dur=" 0.6s" reatCount="tak tentu">animateTransform>
betul>
<tepat x="10" y="0" lebar="4" tinggi="10" isi ="#333" transformasi="terjemah(0 11.5002)" >
<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>
betul>
<tepat x="20" y="0" lebar="4" tinggi="10" isi ="#333" transformasi="terjemah(0 1.83315)" >
<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>
betul>
svg>

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

LANGKAH 2 : 为SVG图像添加颜色

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

Kod XML/HTML复制内容到剪贴板

<gaya>
laluan svg,svg rect{fill: #FF6700;}
gaya>

Selesai! DEMO Akhir:

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

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

<html ng-app="ionicApp">
<kepala>
<meta charset="utf- 8">
<meta nama="viewport" kandungan="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width ">
<tajuk>Ionic Modaltajuk>
<pautan href="http: //www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
<skrip src="http: //www.runoob.com/static/ionic/js/ionic.bundle.min.js">skrip>
kepala>
<badan ng-controller=" AppCtrl">
<pandangan ion tajuk=" Rumah">
<ion-header-bar>
<h1 kelas="tajuk >The Stoogesh1>
ion-header-bar>
<kandungan ion mempunyai pengepala="benar">
<senarai ion>
<item-ion ng-ulang==< >"stooge in stooges" href="#">{ {stooge.name}}item-item>
senarai ion>
kandungan ion>
pandangan ion>
badan>
html>

JavaScript 代码

Kod JavaScript复制内容到剪贴板

angular.module(‘ionicApp‘, [‘ionic‘])
.controller(‘AppCtrl‘, fungsi($skop, $masa tamat, $ionicLoading) {
// Sediakan pemuat
$ionicLoading.show({
kandungan: ‘Memuatkan‘,
animasi: ‘pudar-dalam‘,
showLatar Belakang: benar,
Lebar maksimum: 200,
Tayangan Kelewatan: 0
});
// Tetapkan tamat masa untuk kosongkan pemuat, namun anda sebenarnya memanggil $ionicLoading.hide(); kaedah apabila semua sedia atau dimuatkan.
$masa tamat(fungsi () {
$ionicLoading.hide();
$scope.stooges = [{name: ‘Moe‘}, {name: ‘Larry‘}, {name: ‘Curly‘}];
}, 2000);
});