Ringkasan cara untuk mencapai kesan animasi dalam kemahiran tutorial HTML5 _html5

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


Pelayar anda tidak menyokong -element.Sila fikirkan tentang mengemas kini penyemak imbas anda! id=" controls">
Lebih perlahan
Main
Faster

< ;/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:

casis">

< div class="vr">

>

rumput">