Maison > Article > interface Web > Résumé des façons d'obtenir des effets d'animation dans les compétences du didacticiel HTML5 _html5
Résumé des façons d'obtenir des effets d'animation dans les compétences du didacticiel HTML5 _html5
- WBOYoriginal
- 2016-05-16 15:45:591606parcourir
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 :
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"> < ;/corps>
Code js :
Définir quelques variables :
Copier le code
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
Copier le code
fonction play(s){ //Le paramètre s est un bouton
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
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 :
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 :
//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
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
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 :
< div class="vr">