Rumah >hujung hadapan web >Tutorial H5 >Ringkasan cara untuk mencapai kesan animasi dalam kemahiran tutorial HTML5 _html5

Ringkasan cara untuk mencapai kesan animasi dalam kemahiran tutorial HTML5 _html5

WBOYasal: 2016-05-16 15:45:591627semak imbas

Editor menggunakan kereta yang bergerak sebagai contoh untuk menerangkan tiga cara untuk melaksanakan animasi HTML5. Animasi bukan sahaja kanvas, tetapi juga css3 dan javascript, pelaksanaan yang optimum boleh dicapai.

PS: Disebabkan oleh kad grafik, selang bingkai rakaman dan mungkin pemproses komputer anda, proses main balik mungkin sedikit tidak lancar atau herot!
Ia boleh dilaksanakan dalam tiga cara:
(1) Elemen kanvas digabungkan dengan JS
(2) Animasi CSS3 tulen (tidak disokong oleh semua penyemak imbas arus perdana, seperti IE)
(3) CSS3 digabungkan dengan Jquery
Mengetahui cara menggunakan animasi CSS3 adalah lebih penting daripada mengetahui cara menggunakan elemen kerana penyemak imbas boleh mengoptimumkan prestasi elemen tersebut (biasanya gaya mereka , seperti CSS) , tetapi kesan yang kami gunakan untuk menyesuaikan lukisan menggunakan kanvas tidak boleh dioptimumkan. Sebabnya sekali lagi bahawa perkakasan yang digunakan oleh penyemak imbas terutamanya bergantung pada keupayaan kad grafik. Pada masa ini, penyemak imbas tidak memberi kami akses terus kepada kad grafik Contohnya, setiap operasi lukisan mesti terlebih dahulu memanggil fungsi tertentu dalam penyemak imbas.
1.kanvas
kod html:

Salin kod

Kodnya adalah seperti berikut:

tajuk>Animasi dalam HTML5 menggunakan elemen kanvas

< ;/body> ;

Kod js:

Tentukan beberapa pembolehubah:

Salin kod

Kod adalah seperti berikut :

var dx=5, //Kadar semasakadar=1, //Kelajuan main balik semasaani, //Gelung animasi semasa

c, / /Melukis ( Konteks Kanvas)

w, //Kereta [tersembunyi](Konteks Kanvas)

Ketinggian rumput=130, //Ketinggian latar belakang
keretaAlpha=0, //sudut putaran tayar
keretaX=- 400 , //Kedudukan kereta dalam arah paksi-x (akan diubah)
carY=300, //Kedudukan kereta dalam arah paksi-y (akan kekal malar)
carWidth= 400, //Lebar kereta
Ketinggian kereta=130, //Tinggi kereta
tayarDelta=15, //Jarak dari satu tayar ke casis kereta yang paling hampir
axisDelta=20, / /Jarak antara paksi casis bawah kereta dan tayar
jejari=60; //jejari tayar

Untuk menjadikan kanvas kereta (yang pada mulanya tersembunyi), kami menggunakan fungsi tanpa nama laksana sendiri berikut

Salin kod

Kodnya adalah seperti berikut:

(function(){ var car=document.createElement('canvas'); //Create elementcar.height=carHeight axisDelta radius; //Tetapkan ketinggian

car.width=carWidth; //Tetapkan lebar

w=car.getContext('2d');

Klik butang "Main" untuk mensimulasikan fungsi "main balik bingkai" dengan berulang kali melaksanakan operasi "tarik kereta" pada selang masa yang tetap:

Salin kod

Kodnya adalah seperti berikut:

main fungsi{ //Parameter s ialah butang if(ani){ //Jika ani bukan null, ia mewakili kita Sudah ada animasi clearInterval(ani); ; //Namakan semula butang kepada "Main" }lain{

ani=setInterval(drawCanvas,40); //Kami akan menetapkan animasi kepada 25fps [bingkai sesaat], 40/1000, iaitu satu -twenty-fifth

s.innerHTML='Pause'; //Namakan semula butang kepada "Jeda"

}
}

Pecutan dan nyahpecutan dicapai dengan menukar jarak bergerak melalui kaedah berikut:

Salin kod

Kod adalah seperti berikut :

kelajuan fungsi(delta){
var newRate=Math.max(rate delta,0.1
dx=newRate/rate*dx;
Kaedah permulaan untuk memuatkan halaman:
//init
fungsi init(){
c=document.getElementById('canvas').getContext('2d'); ;
}

Kaedah utama:

Salin kod

Kodnya adalah seperti berikut:

function drawCanvas (){

c.clearRect(0,0,c.canvas.width, c.canvas.height); //Kosongkan Kanvas (dipaparkan) untuk mengelakkan ralat

c.save(); /Simpan nilai dan status koordinat semasa, sepadan dengan operasi "tolak" yang serupa
drawGrass(); //Lukis latar belakang
c.translate(carX,0); 🎜>drawCar(); //Lukis kereta (kanvas tersembunyi)
c.drawImage(w.canvas,0,carY); /Pulihkan keadaan Kanvas, sepadan Ia serupa dengan operasi "pop"
carX =dx; //Tetapkan semula kedudukan kereta dalam arah paksi-X untuk mensimulasikan berjalan ke hadapan
carAlpha =dx/; jejari; //Tingkatkan sudut tayar secara berkadar
jika (carX>c.canvas.width){ //Tetapkan beberapa syarat sempadan biasa
carX=-carWidth-10; //Anda juga boleh membalikkan kelajuan kepada dx *=-1;
}
}

Lukis latar belakang:

Salin kod

Kodnya adalah seperti berikut: function drawGrass( ){ //Buat kecerunan linear Dua parameter pertama ialah koordinat titik permulaan kecerunan, dan dua parameter terakhir ialah koordinat titik akhir kecerunan=c. createLinearGradient(0,c.canvas.height-grassHeight,0 ,c.canvas.height);

//Nyatakan warna kecerunan untuk kecerunan linear, 0 mewakili warna permulaan kecerunan, 1 mewakili warna penghujung kecerunan

grad.addColorStop(0,'#33CC00');

grad.addColorStop(1,'#66FF22'); .fillRect(0,c.canvas.height-grassHeight,c.canvas .width,grassHeight);
Lukis badan kereta:

Salin kod

Kodnya adalah seperti berikut:

fungsi drawCar( ){

w.clearRect(0,0,w.canvas.width,w.canvas.height); //Kosongkan papan seni tersembunyi
w.strokeStyle='#FF6600'; //Tetapkan warna sempadan
w.lineWidth=2; //Tetapkan lebar sempadan dalam piksel

w.fillStyle='#FF9900'; //Tetapkan warna isian

w.beginPath(( ); //Mula melukis laluan baharu w.rect(0,0,carWidth,carHeight); //Lukis segi empat tepatw.stroke(); //Lukis sempadanw.fill (); //Isi latar belakang w.closePath(); //Tutup laluan baharu yang dilukis

drawTire(jejariDelta tayar,carHeight axisDelta); -tayarDelta-radius,carHeight axisDelta);

Lukis tayar:

Salin kod

Kodnya adalah seperti berikut:

function drawTire( x,y){
w.save();
w.translate(x,y>w.rotate(carAlpha>w.strokeStyle='#3300FF'); ;
w.lineWidth=1;

w.fillStyle='#0099FF'; w.beginPath(); PI,false );

w.fill();
w.closePath();
w.beginPath(); (-radius ,0);

w.stroke(); .lineTo( 0,-radius);

w.stroke(); w.closePath(); w.restore(); Memandangkan prinsipnya mudah dan ulasan terperinci dibuat dalam kod, saya tidak akan menerangkannya satu per satu di sini!

2.CSS3

Anda akan melihat bahawa kami telah mencapai sepenuhnya kesan animasi yang sama seperti di atas tanpa satu kod JS:

Kod HTML :

Salin kod

Kod adalah seperti berikut:

Animasi dalam HTML5 menggunakan animasi CSS3

casis">

< div class="vr">

rumput">

Kod CSS :
badan
{
padding:0;
margin:0;
}

Tentukan animasi putaran badan dan tayar (anda akan melihat bahawa pada asasnya setiap animasi mempunyai empat versi definisi: versi asli/kit web[Chrome|Safari]/ms[untuk keserasian ke belakang dengan IE10]/moz[FireFox 】)

/*Tentukan animasi: beralih dari kedudukan -400px ke kedudukan 1600px*/
@keyframes carAnimation
{
0% { left:-400px } /* Tentukan kedudukan awal , 0% bersamaan dengan dari*/
100% { left:1600px } /* Menentukan kedudukan akhir, 100% bersamaan dengan*/
}
/* Safari dan Chrome */
@ -webkit-keyframes carAnimation
{
0% {kiri:-400px }
100% {kiri:1600px }
}
/* Firefox */
@ -moz -keyframes carAnimation
{
0% {left:-400; }
100% {left:1600px;}
/*IE belum menyokong definisi ini adalah untuk Back serasi dengan IE10*/
@-ms-keyframes carAnimation
{
0% {left:-400px }
100%{left:1600px; tyreAnimation
{
0% {transform: rotate(0);
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); :relative;
lebar:100%;
tinggi:600px;
overflow:hidden; :mutlak; / *Kereta diletakkan sepenuhnya di dalam bekas*/
lebar: 400px; :1; /*Biarkan kereta Di atas latar belakang*/
atas:300px /*Jarak dari atas (paksi-y)*/
kiri:50px; /
/* Kandungan berikut memberikan animasi pratakrif elemen dan atribut berkaitan*/
-webkit-animation-name:carAnimation/
-webkit-animation-duration:10s; duration*/
-webkit-animation-iteration-count:infinite; /*Bilangan lelaran-infinite*/
-webkit-animation-timing-function:linear; untuk menamatkan* /
-moz-animation-name:carAnimation; /*name*/
-moz-animation-duration:10s; tidak terhingga; /*Bilangan lelaran - tidak terhad*/
-moz-animation-timing-function:linear; ; /*Nama*/
-ms-animation-duration:10s; /*Duration*/
-ms-animasi-iteration-count:infinite; ms-animation-timing-function:linear; /*Mainkan animasi pada kelajuan yang sama dari awal hingga akhir*/
animation-name:carAnimation; /*Name*/
animasi-duration:10s; */
bilangan lelaran-animasi:tak terhingga; /*Bilangan lelaran-tak terhingga*/
fungsi pemasa-animasi:linear; /*Mainkan animasi pada kelajuan yang sama dari awal hingga akhir*/
}
/*badan*/
#casis
{
kedudukan:mutlak
lebar:400px;
tinggi:130px; sempadan: 2px pepejal #FF6600;
}
/*Tayar*/
.tayar
{
z-index:1; latar belakang*/
kedudukan:mutlak;
bawah:0;
jejari sempadan:60px;
lebar:120px; /* 2*radius=width */
latar belakang:#0099FF; /*warna isian*/
sempadan:1px pepejal #3300FF; tyreAnimation ;
-webkit-animation-duration: 10s; nama :tyreAnimation;
-moz-animation-duration: 10s; animasi -name:tyreAnimation;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite; - name:tyreAnimation;
animasi-tempoh:10s;
animasi-iteration-count:infinite;
animasi-timing-function:linear; 🎜 >kanan:20px; /*Tetapkan jarak antara tayar kanan dan tepi kepada 20*/
}
#tayar belakang
{
kiri:20px; tayar dan tepi ke 20*/
}
#rumput
{
kedudukan:mutlak; /*Latar belakang diletakkan secara mutlak dalam bekas*/
lebar: 100%; >tinggi:130px;
bawah:0;
/*Biar warna latar belakang kecerunan linear, bawah, mewakili titik permulaan kecerunan, nilai warna pertama ialah nilai permulaan kecerunan, nilai warna kedua ialah nilai akhir*/
background:linear-grdaient(bawah,#33CC00,#66FF22
latar belakang:-webkit-linear-gradient(bawah,#33CC00,#66FF22); -moz-linear-gradient(bawah, #33CC00,#66FF22);
latar belakang:-ms-linear-gradient(bawah,#33CC00,#66FF22); 🎜>{
kedudukan:mutlak ;
latar belakang:#3300FF;
}
.jam
{
tinggi:1px; daripada tayar*/
kiri:0 ;
atas:60px;
}
.vr
{
lebar:1px;
tinggi:100%; /*garisan menegak tayar*/
kiri: 60px; >

3.JQuery dan CSS3

Ini adalah kaedah dengan kesan dan keserasian yang baik (terutamanya kerana IE9 belum menyokong CSS3 lagi) Kod HTML (Anda boleh lihat bahawa ia tidak berbeza daripada kod HTML dalam CSS3):

Salin kod

Kodnya adalah seperti berikut:

/title>

id=" chasis">

"hr" >