Résumé des façons d'obtenir des effets d'animation dans les compétences du didacticiel HTML5 _html5

L'éditeur utilise une voiture en mouvement comme exemple pour décrire trois façons d'implémenter l'animation HTML5. Les idées sont claires. L'animation n'est pas seulement du canevas, mais aussi du css3 et du javascript, une implémentation optimale peut être obtenue.

PS : En raison de la carte graphique, de l'intervalle des images d'enregistrement et éventuellement du processeur de votre ordinateur, le processus de lecture peut être un peu irrégulier ou déformé !
Il peut être implémenté de trois manières :
(1) Élément Canvas combiné avec JS
(2) Animation CSS3 pure (non prise en charge par tous les navigateurs grand public, tels que IE)
(3) CSS3 combiné avec Jquery
Savoir utiliser l'animation CSS3 est plus important que savoir utiliser l'élément <canvas> , comme CSS), mais l'effet que nous utilisons pour personnaliser le dessin à l'aide de Canvas ne peut pas être optimisé. La raison en est encore une fois que le matériel utilisé par le navigateur dépend principalement des capacités de la carte graphique. Actuellement, le navigateur ne nous donne pas d'accès direct à la carte graphique. Par exemple, chaque opération de dessin doit d'abord appeler certaines fonctions du navigateur.
1.canvas
Code HTML :

Copier le code

Le code est le suivant :

title>Animation en HTML5 utilisant l'élément canvas

"1000" height="600">Votre navigateur ne prend pas en charge l'élément <canvas>. Pensez à mettre à jour votre navigateur ! id="contrôles">
Plus lent
Jouer
Plus rapide

< ;/corps>


Code js :

Définir quelques variables :

Copier le code

Le code est la suivante :

var dx=5, //Taux actuelrate=1, //Vitesse de lecture actuelleani, //Boucle d'animation actuelle

c, / /Drawing (Contexte du canevas)

w, //Voiture [cachée](Contexte du canevas)

grassHeight=130, //Hauteur de l'arrière-plan
carAlpha=0, //Angle de rotation des pneus
carX=- 400 , //La position de la voiture dans la direction de l'axe x (sera modifiée)
carY=300, //La position de la voiture dans la direction de l'axe y (restera constante)
carWidth= 400, //La largeur de la voiture
carHeight=130, //La hauteur de la voiture
tiresDelta=15, //La distance entre un pneu et le châssis de la voiture le plus proche
axisDelta=20, / /La distance entre l'axe du châssis inférieur de la voiture et le pneu
rayon=60 //rayon du pneu



Pour instancier le canevas de la voiture (qui est initialement masqué), nous utilisons la fonction anonyme auto-exécutable suivante

Copier le code

Le code est le suivant :

(function(){ var car=document.createElement('canvas'); //Créer un élémentcar.height=carHeight axisDelta radius; //Définir la hauteur

car.width=carWidth; //Définir la largeur

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

Cliquez sur le bouton « Play » pour simuler la fonction « lecture d'image » en exécutant de manière répétée l'opération « dessiner la voiture » ​​à intervalles réguliers :





Copier le code

Le code est le suivant :

fonction play(s){ //Le paramètre s est un bouton

if(ani){ //Si ani n'est pas nul, cela nous représente Il y a déjà une animation

clearInterval(ani); //il faut donc l'effacer (arrêter l'animation) ani=null s.innerHTML='Play' ; //Renommer le bouton en "Play" }else{ ani=setInterval(drawCanvas,40); //Nous définirons l'animation à 25 ips [images par seconde], 40/1000, ce qui est un -vingt-cinquième

s.innerHTML='Pause'; //Renommer le bouton en "Pause"

}

}



L'accélération et la décélération sont obtenues en modifiant la distance de déplacement grâce aux méthodes suivantes :





Copiez le code

Le code est le suivant :

fonction vitesse(delta){
var newRate=Math.max(rate delta,0.1);
dx=newRate/rate*dx;
Méthode d'initialisation pour le chargement de la page :
//init
function init(){
c=document.getElementById('canvas').getContext('2d'); ;
}



Méthode principale :

Copier le code

Le code est le suivant :

function drawCanvas (){

c.clearRect(0,0,c.canvas.width, c.canvas.height); //Effacer le canevas (affiché) pour éviter les erreurs

c.save(/); /Enregistrer les valeurs et l'état actuels des coordonnées, correspondant à des opérations "push" similaires
drawGrass(); //Dessiner l'arrière-plan
c.translate(carX,0); //Déplacer les coordonnées du point de départ
c.translate(carX,0); 🎜>drawCar(); //Dessine une voiture (toile cachée)
c.drawImage(w.canvas,0,carY); //Dessine la voiture qui est finalement affichée
c.restore(); /Restaurer l'état du canevas, correspondant C'est similaire à l'opération "pop"
carX =dx; //Réinitialiser la position de la voiture dans la direction de l'axe X pour simuler la marche en avant
carAlpha =dx/ radius; //Augmente l'angle du pneu proportionnellement
if (carX>c.canvas.width){ //Définissez des conditions limites régulières
carX=-carWidth-10 //Vous pouvez également inverser la vitesse en dx; *=-1;
}
}



Dessiner l'arrière-plan :

Copier le code

Le code est le suivant :

function drawGrass( ){

//Créez un dégradé linéaire. Les deux premiers paramètres sont les coordonnées du point de départ du dégradé, et les deux derniers paramètres sont les coordonnées du point final du dégradé

var grad=c. createLinearGradient(0,c.canvas.height-grassHeight,0 ,c.canvas.height);
//Spécifiez la couleur du dégradé pour le dégradé linéaire, 0 représente la couleur de départ du dégradé, 1 représente la couleur de fin du dégradé
grad.addColorStop(0,'#33CC00');
grad.addColorStop(1,'#66FF22');
c.fillStyle=grad; .fillRect(0,c.canvas.height-grassHeight,c.canvas .width,grassHeight
}

Dessinez la carrosserie de la voiture :

Copiez le code

Le code est le suivant :

function drawCar( ){ w.clearRect(0,0,w.canvas.width,w.canvas.height); //Effacer le plan de travail cachéw.strokeStyle='#FF6600'; //Définissez la couleur de la bordure

w.lineWidth=2; //Définissez la largeur de la bordure en pixels

w.fillStyle='#FF9900'; //Définissez la couleur de remplissage

w.beginPath( ); //Commencer à dessiner un nouveau chemin
w.rect(0,0,carWidth,carHeight); //Dessiner un rectangle
w.stroke(); //Dessiner une bordure
w.fill); (); //Remplir l'arrière-plan
w.closePath(); //Fermer le nouveau chemin dessiné
drawTire(tiresDelta radius,carHeight axisDelta); //Nous commençons à dessiner la première roue
drawTire(carWidth); -tiresDelta-radius,carHeight axisDelta); / /De même, le deuxième
}



Dessiner des pneus :

Copier le code

Le code est le suivant :

function drawTire( x,y){ w.save(); w.translate(x,y);

w.rotate(carAlpha); ;

w.lineWidth=1;

w.fillStyle='#0099FF';
w.beginPath(); PI,false );
w.fill();
w.closePath();
w.beginPath();
w.moveTo(radius,0); (-radius ,0);
w.stroke();
w.closePath();
w.beginPath();
w.moveTo(0,radius); .lineTo( 0,-radius);
w.stroke();
w.closePath();
w.restore();
Comme le principe est simple et que des commentaires détaillés sont faits dans le code, je ne les expliquerai pas un par un ici !


2.CSS3


Vous verrez que nous avons complètement réalisé le même effet d'animation que ci-dessus sans un seul code JS :

Code HTML :

Copiez le code
Le code est le suivant :

châssis">

< div class="vr">

>