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 :
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">
< ;/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 :
Animations en HTML5 utilisant des animations CSS3
châssis">
< div class="vr">
>
herbe">
Code CSS : corps { padding:0; marge:0 }
Définissez l'animation de rotation de la carrosserie et des pneus (vous verrez qu'en gros, chaque animation a quatre versions de définition : version native/webkit[Chrome|Safari]/ms[pour une compatibilité ascendante avec IE10]/moz[FireFox 】)
Copiez le code
Le code est le suivant :
/*Définir l'animation : passer de la position -400px à la position 1600px*/ @keyframes carAnimation { 0% { left:-400px } /* Spécifier la position initiale, 0% équivaut à from*/ 100% { left:1600px; } /* Spécifie la position finale, 100% équivaut à to*/ } /* Safari et Chrome */ @ -webkit-keyframes carAnimation { 0% {left:-400px; } 100% {left:1600px; } /* Firefox */ @ -moz -keyframes carAnimation { 0% {left:-400; } 100% {left:1600px; } /*IE ne prend pas encore en charge cette définition. est pour Back compatible avec IE10*/ @-ms-keyframes carAnimation { 0% {left:-400px } 100%{left:1600px } } @keyframes; tyreAnimation { 0% {transform: rotate(0); } 100% {transform: rotate(1800deg); } @-webkit-keyframes tyreAnimation { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(1800deg } } @-moz-keyframes tyreAnimation { 0% { -moz-transform : rotation(0); } 100 % { -moz-transform : rotation(1800deg) } } @-ms-keyframes tyreAnimation { 0% { -ms-transform: rotate(0); } 100% { -ms-transform: rotate(1800deg); } } #container { position :relative; largeur:100%; hauteur:600px; overflow:hidden; /*C'est très important*/ } #car { position :absolute; / *La voiture est positionnée de manière absolue dans le conteneur*/ width:400px height:210px /*La hauteur totale de la voiture, pneus et châssis compris*/ z-index; :1; /*Laissez la voiture au-dessus de l'arrière-plan*/ top:300px; /*Distance du haut (axe y)*/ gauche:50px; / /* Le contenu suivant donne à l'élément une animation prédéfinie et les attributs associés*/ -webkit-animation-name:carAnimation; /*name*/ -webkit-animation-duration:10s; durée*/ -webkit-animation-iteration-count:infinite; /*Nombre d'itérations-infini*/ -webkit-animation-timing-function:linear /*Lire l'animation à la même vitesse depuis le début pour terminer* / -moz-animation-name:carAnimation; /*name*/ -moz-animation-duration:10s /*duration*/ -moz-animation-iteration-count : infini; /*Nombre d'itérations - illimité*/ -moz-animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/ -ms-animation-name:carAnimation ; /*Nom*/ -ms-animation-duration:10s /*Duration*/ -ms-animation-iteration-count:infinite; /*Nombre d'itérations-infini*/ - ms-animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/ animation-name:carAnimation; /*Name*/ animation-duration:10s; */ animation-iteration-count:infinite; /*Nombre d'itérations-infini*/ animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/ } /*corps*/ #châssis { position:absolue; largeur:400px hauteur:130px arrière-plan:#FF9900; border: 2px solid #FF6600; } /*Tire*/ .tire { z-index:1 /*Identique à ci-dessus, le pneu doit également être placé dans l'arrière-plan au-dessus*/ position:absolute; bottom:0; border-radius:60px; /*circle radius*/ height:120px; width:120px; /* 2*radius=width */ background:#0099FF; /*fill color*/ border:1px solid #3300FF -webkit-animation-name : tyreAnimation ; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite -webkit-animation-timing-function:linear; nom :tyreAnimation; -moz-animation-duration:10s; -moz-animation-iteration-count:infinite -moz-animation-timing-function:linear; animation -name:tyreAnimation; -ms-animation-duration:10s; -ms-animation-iteration-count:infinite -ms-animation-timing-function:linear; - name:tyreAnimation; animation-duration:10s; animation-iteration-count:infinite; animation-timing-function } #fronttire { right:20px; /*Réglez la distance entre le pneu droit et le bord à 20*/ } #backtire { left:20px /*Définissez la distance entre le pneu gauche; pneu et le bord à 20*/ } #grass { position:absolute; /*Le fond est positionné de manière absolue dans le conteneur*/ width:100% height:130px; bottom:0; /*Laissez la couleur d'arrière-plan dégradée linéairement, en bas, représenter le point de départ du dégradé, la première valeur de couleur est la valeur de départ du dégradé, la deuxième valeur de couleur est la valeur finale*/ background:linear-grdaient(bottom,#33CC00,#66FF22); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); -moz-linear-gradient(bottom, #33CC00,#66FF22); background:-ms-linear-gradient(bottom,#33CC00,#66FF22 } .hr,.vr { position:absolue ; arrière-plan:#3300FF; } .hr { hauteur:1px largeur:100%; du pneu*/ gauche:0 top:60px } .vr { largeur:1px; hauteur:100%; /*Ligne verticale du pneu*/ gauche haut:0 }
3.JQuery et CSS3 C'est une méthode avec un bon effet et une bonne compatibilité (d'autant plus qu'IE9 ne prend pas encore en charge CSS3) Code HTML (vous pouvez voyez qu'il n'est pas différent du code HTML en CSS3) :
Copiez le codeLe code est le suivant :
Animations en HTML5 à l'aide d'animations CSS3< /titre>