Maison > Article > interface Web > Méthode de mise en œuvre de l'animation JS
Méthode de mise en œuvre de l'animation JS
- 一个新手original
- 2017-09-23 10:33:122084parcourir
Il existe six manières principales d'implémenter l'animation : l'animation directe Javascript, l'animation graphique vectorielle évolutive (SVG), la transition CSS, l'animation CSS3, l'animation Canvas et requestAnimationFrame.
implémentation de javascript
<!DOCTYPE html><html><head>
<style>
.content{width: 100px;height: 100px;background-color: red;}
</style></head><body><p class="content"></p><script>
var ele=document.getElementsByClassName("content")[0];
var left=0;
let timer=setInterval(function () {
if(left<window.innerWidth-100){
ele.style.marginLeft=left+'px';
left++;
} else {
clearInterval(timer);
}
},16);</script></body></html>Inconvénients : la mise en œuvre d'une animation via Javascript entraîne généralement un réarrangement et un redessinage fréquents des pages, ce qui consomme des performances.
Selon le bon sens, changer la position des éléments entraînera un réarrangement. Pourquoi toutes les images présentées dans l'image ci-dessus sont-elles redessinées ? La raison en est que le positionnement absolu créera un nouveau calque, et il n'y a que l'élément actuel sur ce calque, il sera donc uniquement redessiné, pas réorganisé. Cela nous indique également que dans la même couche, lorsque le nombre d'éléments est petit, les performances de réorganisation sont meilleures et la vitesse sera plus rapide.
Transition CSS3
<!DOCTYPE html><html><head>
<style>
.content{
width: 100px;
height: 100px;
background-color: red;
transition: all 10s ease-in-out 0s;
-webkit-transition: all 10s ease-in-out 0s;
margin-left: 0;
}
.right{
width: 100px;
height: 100px;
margin-left: 400px;
background-color: blue;
}
</style></head><body><p class="content"></p><script>var timer=setTimeout(function () {
var content=document.getElementsByClassName("content")[0];
content.setAttribute('class','right');
},500);</script></body></html>Pourquoi la transformation ne déclenche-t-elle pas la repeinture ? En bref, l'animation de transformation est contrôlée par le GPU, prend en charge l'accélération matérielle et ne nécessite pas de rendu logiciel.
Principe de l'accélération matérielle
Une fois que le navigateur a reçu le document de page, il analysera le langage de balisage du document dans une arborescence DOM. L'arborescence DOM et CSS sont combinés pour former l'arborescence de rendu permettant au navigateur de créer la page. L'arbre de rendu contient un grand nombre d'éléments de rendu. Chaque élément de rendu sera divisé en un calque, et chaque calque sera chargé dans le GPU pour former une texture de rendu. La transformation du calque dans le GPU ne déclenchera pas la repeinture. les couches utilisant la transformation seront traitées par des processus de composition indépendants.
Animation CSS3
<!DOCTYPE html><html><head>
<style>
.content{
width: 100px;
height: 100px;
background-color: red;
transition: all 10s ease-in-out 0s;
-webkit-transition: all 10s ease-in-out 0s;
animation: move 4s infinite;
margin-left: 0;
}
@keyframes move {
from{
margin-left: 0;
}
50%{
margin-left: 400px;
}
to{
margin-left: 0;
}
}
</style></head><body><p class="content"></p></body></html>Toutes les propriétés CSS ne peuvent pas déclencher l'accélération matérielle du GPU (les modifications des propriétés de couche dans le GPU ne déclencheront pas la repeinture), en fait, seule une peu de propriétés le peuvent, comme les suivantes :
transformer
opacité
filtre
Animation canevas
<!DOCTYPE html><html><head></head><body><canvas id="canvas" width="700" height="500"></canvas><script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var left=0;
var timer=setInterval(function () {
ctx.clearRect(0,0,700,550);
ctx.beginPath();
ctx.fillStyle="#f00";
ctx.fillRect(left,0,100,100);
ctx.stroke();
if(left>700){
clearInterval(timer);
}
left+=1;
},16);</script></body></html>requestAnimationFrame
<!DOCTYPE html><html><head>
<style>
p{width: 100px;height: 100px;background-color: red;}
</style></head><body><p id="box" width="700" height="500"></p><script>
window.requestAnimationFrame=window.requestAnimationFrame||
window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
let element=document.getElementById("box");
let left=0;
requestAnimationFrame(step);
function step() {
if(left<window.innerWidth-200){
left+=1;
element.style.marginLeft=left+"px";
requestAnimationFrame(step);
}
}</script></body></html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!