Zusammenfassung der Möglichkeiten zum Erzielen von Animationseffekten in HTML5 _HTML5-Tutorial-Fähigkeiten

Der Editor verwendet ein fahrendes Auto, um drei Möglichkeiten zur Implementierung von HTML5-Animationen zu beschreiben. Die Ideen sind nicht nur Canvas, sondern auch CSS3 und Javascript.

PS: Aufgrund der Grafikkarte, des Aufnahmebildintervalls und möglicherweise Ihres Computerprozessors kann der Wiedergabevorgang etwas unruhig oder verzerrt sein!
Es kann auf drei Arten implementiert werden:
(1) Canvas-Element kombiniert mit JS
(2) Reine CSS3-Animation (nicht von allen Mainstream-Browsern wie IE unterstützt)
(3) CSS3 kombiniert mit Jquery
Zu wissen, wie man CSS3-Animationen verwendet, ist wichtiger als zu wissen, wie man das <canvas>-Element verwendet: weil der Browser die Leistung dieser Elemente (normalerweise ihrer Stile) optimieren kann , wie z. B. CSS), aber der Effekt, den wir zum Anpassen der Zeichnung mithilfe von Canvas verwenden, kann nicht optimiert werden. Der Grund liegt wiederum darin, dass die vom Browser verwendete Hardware hauptsächlich von den Fähigkeiten der Grafikkarte abhängt. Derzeit ermöglicht uns der Browser keinen direkten Zugriff auf die Grafikkarte. Beispielsweise muss jeder Zeichenvorgang zunächst bestimmte Funktionen im Browser aufrufen.
1.canvas
HTML-Code:

Code kopieren

Der Code lautet wie folgt:

Animation in HTML5 mit dem Canvas-Element
"1000" height="600">Ihr Browser unterstützt das <canvas>-Element nicht. Bitte denken Sie über ein Update Ihres Browsers nach! id=" steuert">
Langsamer
Play
Schneller

< ;/body> ;


js-Code:

Definieren Sie einige Variablen:

Code kopieren
Der Code ist wie folgt:

var dx=5, //Aktuelle Rate

rate=1, //Aktuelle Wiedergabegeschwindigkeitani, //Aktuelle Animationsschleifec, / /Drawing (Canvas-Kontext) w, //Auto [versteckt](Canvas-Kontext) grassHeight=130, //Hintergrundhöhe

carAlpha=0, //Reifendrehwinkel

carX=- 400 , //Die Position des Autos in Richtung der x-Achse (wird geändert)

carY=300, //Die Position des Autos in Richtung der y-Achse (bleibt konstant)
carWidth= 400, //Die Breite des Autos
carHeight=130, //Die Höhe des Autos
tiresDelta=15, //Der Abstand von einem Reifen zum nächstgelegenen Autochassis
axisDelta=20, / /Der Abstand zwischen der Achse des unteren Fahrgestells des Autos und dem Reifen
Radius=60; //Radius des Reifens



Um die Auto-Leinwand zu instanziieren (die zunächst ausgeblendet ist), verwenden wir die folgende selbstausführende anonyme Funktion





Code kopieren

Der Code lautet wie folgt:

(function(){

var car=document.createElement('canvas'); //Element erstellencar.height=carHeight axisDelta radius; //Höhe festlegen car.width=carWidth; //Breite festlegen w=car.getContext('2d'})(); > Klicken Sie auf die Schaltfläche „Wiedergabe“, um die Funktion „Bildwiedergabe“ zu simulieren, indem Sie in regelmäßigen Abständen wiederholt den Vorgang „Auto zeichnen“ ausführen:

Code kopieren


Der Code lautet wie folgt:

function play(s){ //Der Parameter s ist eine Schaltfläche

if(ani){ //If ani ist nicht null, es repräsentiert uns. Es gibt bereits eine Animation
clearInterval(ani); //also müssen wir sie löschen (die Animation stoppen)
s.innerHTML='Play' ; //Die Schaltfläche in „Play“ umbenennen

}else{

ani=setInterval(drawCanvas,40); //Wir werden die Animation auf 25fps [Bilder pro Sekunde], 40/1000, einstellen -twenty-fifth s.innerHTML='Pause'; // Benennen Sie die Schaltfläche in „Pause“ um } }

Beschleunigung und Verzögerung werden durch Ändern der Bewegungsdistanz mit den folgenden Methoden erreicht:





Kopieren Sie den Code


Der Code ist wie folgt:

function speed(delta){
var newRate=Math.max(rate delta,0.1);
dx=newRate/rate*dx;
}
Initialisierungsmethode zum Laden der Seite:
//init
function init(){
c=document.getElementById('canvas').getContext('2d'); ;
}

Hauptmethode:

Code kopieren Der Code lautet wie folgt:

function drawCanvas (){

c.clearRect(0,0,c.canvas.width, c.canvas.height); //Löschen Sie die Leinwand (angezeigt), um Fehler zu vermeiden
c.save(); / /Speichern Sie die aktuellen Koordinatenwerte und den Status, entsprechend ähnlichen „Push“-Vorgängen
drawGrass(); //Zeichnen Sie den Hintergrund
c.translate(carX,0); //Verschieben Sie die Startpunktkoordinaten
drawCar(); //Zeichne ein Auto (versteckte Leinwand)
c.drawImage(w.canvas,0,carY); //Zeichne das Auto, das schließlich angezeigt wird
c.restore(); /Stellen Sie den Zustand der Leinwand wieder her, entsprechend Es ähnelt der „Pop“-Operation
carX =dx; //Setzen Sie die Position des Autos in Richtung der X-Achse zurück, um das Vorwärtsgehen zu simulieren
carAlpha =dx/ radius; //Erhöhen Sie den Reifenwinkel proportional
if (carX>c.canvas.width){ //Legen Sie einige reguläre Randbedingungen fest
carX=-carWidth-10; //Sie können die Geschwindigkeit auch auf dx umkehren *=-1;
}
}

Hintergrund zeichnen:

Code kopieren Der Code lautet wie folgt:

Funktion drawGrass( ){

//Erstellen Sie einen linearen Farbverlauf. Die ersten beiden Parameter sind die Koordinaten des Farbverlaufs-Startpunkts und die letzten beiden Parameter sind die Koordinaten des Farbverlaufs-Endpunkts
var grad=c. createLinearGradient(0,c.canvas.height-grassHeight,0 ,c.canvas.height); Geben Sie die Verlaufsfarbe für den linearen Verlauf an, 0 stellt die Verlaufsanfangsfarbe dar, 1 stellt die Verlaufsendfarbe dar
grad.addColorStop(0,'#33CC00');
grad.addColorStop(1,'#66FF22');
c.lineWidth=0; .fillRect(0,c.canvas.height-grassHeight,c.canvas .width,grassHeight);
Zeichnen Sie die Karosserie:





Kopieren Sie den Code

Der Code lautet wie folgt:

function drawCar( ){

w.clearRect(0,0,w.canvas.width,w.canvas.height); //Löschen Sie die ausgeblendete Zeichenflächew.StrokeStyle='#FF6600'; //Legen Sie die Randfarbe festw.lineWidth=2; //Legen Sie die Breite des Randes in Pixel festw.fillStyle='#FF9900';/Legen Sie die Füllfarbe festw.beginPath( ); // Beginnen Sie mit dem Zeichnen eines neuen Pfads

w.rect(0,0,carWidth,carHeight); //Zeichnen Sie ein Rechteck

w.Stroke(); //Zeichnen Sie einen Rand

w.fill (); //Füllen Sie den Hintergrund
w.closePath(); //Schließen Sie den neu gezeichneten Pfad
drawTire(tiresDelta radius,carHeight axisDelta); //Wir beginnen mit dem Zeichnen des ersten Rades
drawTire(carWidth -tiresDelta-radius,carHeight axisDelta); / /In ähnlicher Weise die zweite
}



Reifen zeichnen:





Code kopieren

Der Code lautet wie folgt:

function drawTire( x,y){

w.save(); w.translate(x,y); w.strokeStyle='#3300FF' ; w.lineWidth=1; w.fillStyle='#0099FF';

w.arc(0,0,radius,0,2*Math. PI,false);

w.fill();

w.beginPath();
w.lineTo (-radius ,0);
w.closePath();
w.moveTo(0,radius); .lineTo( 0,-radius);
w.closePath();
w.restore(}



Da das Prinzip einfach ist und detaillierte Kommentare im Code enthalten sind, werde ich sie hier nicht einzeln erklären!


2.CSS3


Sie werden sehen, dass wir ohne einen einzigen JS-Code vollständig den gleichen Animationseffekt wie oben erreicht haben:

HTML-Code:






Kopieren Sie den Code

Der Code lautet wie folgt:

Fahrgestell">

< div class="vr">

>