Auparavant, dans une page de loterie mobile, la fenêtre d'affichage des résultats de la loterie devait afficher un carrousel de barrage. J'avais déjà traversé quelques pièges. Je vais maintenant résumer comment obtenir l'effet de barrage frontal.
Voyons d’abord comment implémenter le barrage le plus simple via CSS :
Définissez d'abord la structure dom d'un barrage en HTML :
<div class=block>Je suis Danmaku</div>
Le mouvement du barrage peut être réalisé en déplaçant ce bloc. En prenant comme exemple le barrage se déplaçant de droite à gauche, la position initiale du barrage est du côté le plus à gauche du conteneur et est cachée le long du bord (le côté le plus à gauche du conteneur). le barrage est le même que le côté le plus à droite du conteneur). Ajustement), ce qui peut être réalisé par positionnement et transformation absolus :
.block{position:absolue;}Position initiale :
de{ gauche : 100 % ; transform : translateX(0)}La position finale du déplacement vers l'extrême gauche est (le côté le plus à droite du barrage est aligné avec le côté le plus à gauche du conteneur) :
à{gauche :0 ; transformer:translateX(-100%)}Les illustrations spécifiques de la position de départ et de la position finale sont les suivantes :
Une animation de barrage complète à deux images peut être définie en fonction de la position de départ et de la position de fin :
@keyframes barrage{ de{ left:100%; transform:translateX(0 } à{ left:0; transform:translateX(-100% }})Présentez cette animation à l’élément barrage :
.block{ position:absolute; /* autre style de décoration */ animation:barrage 5s linéaire 0s;}De cette façon, une version mendiante de l’effet de barrage peut être obtenue :
Tout d’abord, clarifions le processus de rendu des CSS
I) Générer un arbre DOM basé sur la structure HTML (l'arbre DOM contient des nœuds display:none) II) Basé sur l'arbre DOM, générer un arbre de rendu basé sur les attributs géométriques des nœuds (marge/padding/largeur/hauteur /gauche, etc.) III) Continuer à rendre les attributs tels que la couleur et la police en fonction de l'arbre de rendu
Si les propriétés de I) et II) changent, une refusion se produira. Si seules les propriétés de III) changent, seule une repeinture aura lieu. Évidemment, cela se voit aussi dans le processus de rendu CSS : la redistribution doit s'accompagner d'un redessin.
redistribution : lorsqu'une partie ou la totalité de l'arbre de rendu change en raison de la taille, des marges, etc., le processus doit être reconstruit. Repaint : lorsque certains attributs de l'élément changent, tels que l'apparence et la couleur d'arrière-plan, la mise en page ne sera pas. affecté Le processus de re-rendu dû aux modifications est appelé redessin.
La redistribution affectera la vitesse de rendu du CSS du navigateur. Par conséquent, lors de l'optimisation des performances des pages Web, il est nécessaire de réduire l'apparition de redistribution.
Dans la première section, nous avons utilisé l'attribut left pour obtenir l'effet de barrage. Left modifiera la disposition de l'élément, donc une redistribution se produira, ce qui entraînera le gel de l'animation du barrage sur la page mobile.
2. Optimisation des performances du barrage CSS3Nous avons découvert que l'animation de barrage de la première section présente un problème bloqué. Voyons comment résoudre l'animation bloquée.
(1) CSS active l'accélération matérielleUtilisez CSS pour activer l'accélération matérielle dans le navigateur et utilisez le GPU (Graphics Processing Unit) pour améliorer les performances des pages Web. Compte tenu de cela, nous pouvons utiliser la puissance du GPU pour rendre notre site Web ou notre application plus fluide.
Les animations, transformations et transitions CSS n'activent pas automatiquement l'accélération GPU, mais sont effectuées par le lent moteur de rendu logiciel du navigateur. Alors comment passer en mode GPU ? De nombreux navigateurs proposent certaines règles CSS déclenchées.
La méthode la plus courante consiste à activer l'accélération matérielle via des modifications 3D (attribut translation3d). Compte tenu de cela, nous modifions l'animation comme :
@keyframes barrage{ de{ left:100%; transform:translate3d(0,0,0 } à{ left:0; transform:translate3d(-100%,0,0 }});De cette façon, vous pouvez optimiser les performances des pages Web en activant l'accélération matérielle. Cependant, cette méthode ne résout pas fondamentalement le problème. Dans le même temps, l’utilisation du GPU augmente l’utilisation de la mémoire, ce qui réduira la durée de vie de la batterie de l’appareil mobile, etc.
(2)Ne modifiez pas l'attribut de gauche
La deuxième méthode consiste à trouver un moyen de ne pas modifier la valeur de l'attribut gauche avant et après l'animation du barrage, afin qu'aucune redistribution ne se produise.
Nous voulons déterminer la position initiale du nœud de barrage uniquement via TranslateX, mais TranslateX(-100%) est relatif au nœud de barrage lui-même, pas à l'élément parent, nous couplons donc js et css pour obtenir le barrage en js La largeur de l'élément parent où se trouve le nœud, puis la position initiale du nœud de barrage est définie en fonction de la largeur.
Prenons par exemple lorsque l'élément parent est body :
//css .block{ position:absolute; left:0; visibilité:hidden; /* autre style de décoration */ animation:barrage 5s linéaire 0s;}//jslet style = document.createElement('style');document.head .appendChild(style);let width = window.innerWidth;let from = `from { visibilité : visible ; traduireX(${width}px); }`;let to = `to { visibilité: visible; -webkit-transform: translateX(-100%);style.sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);En plus de coupler js pour calculer la largeur de l'élément parent afin de déterminer la position initiale du nœud de barrage, afin d'éviter que la position initiale ne soit affichée dans le nœud de barrage, nous avons ajouté l'attribut visibilité:hidden. Empêchez les nœuds de barrage d'être affichés dans le conteneur parent avant que la position initiale ne soit déterminée. Le barrage ne deviendra visible que s'il commence à défiler depuis sa position initiale.
Cependant, cette méthode d'implémentation CSS est plus gênante pour réaliser les fonctions étendues du barrage, telles que la façon de contrôler la pause du barrage, etc.
3. Canvas implémente le barrageEn plus de la méthode de réalisation d'un barrage via CSS, le barrage peut également être réalisé via Canvas.
Le principe de la réalisation d'un barrage à travers le canevas est de redessiner le texte de temps en temps. Mettons-le en œuvre étape par étape.
Obtenir une toile
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d');Dessiner du texte
ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('le canevas dessine le texte', x, y);Le fillText ci-dessus est l'API principale pour obtenir l'effet de barrage, où x représente la coordonnée horizontale et y représente la coordonnée verticale. Tant que x et y sont modifiés de temps en temps et redessinés, l'effet de barrage dynamique peut être obtenu. Copier le code
Contenu du dessin clair
ctx.clearRect(0, 0, largeur, hauteur);Mise en œuvre spécifique
Grâce à la minuterie, x, y est modifié régulièrement. Avant chaque modification, l'écran est d'abord effacé, puis redessiné en fonction de x, y modifié. Lorsqu'il y a plusieurs barrages, définissez :
let colorArr=_this.getColor(color); Le tableau de couleurs correspondant au tableau de barrage let numArrL=_this.getLeft(); Le tableau de coordonnées x correspondant au tableau de barrage let numArrT=_this.getTop(); Le tableau de positions de coordonnées y correspondant let speedArr=_this.getSpeed(); Le tableau de vitesse de déplacement du barrage correspondant au tableau de barrage
La fonction de redessinage programmée du barrage est :
_this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=vitesseArr[j]; ctx.fillStyle = couleurArr[j] ctx.fillText(barrageList[j],numArrL[j],numArrT[j]); ctx.restore( },16.7);L'effet obtenu est :
La méthode d'implémentation du barrage via Canvas est très pratique pour les fonctions étendues telles que la pause du défilement du barrage. De plus, vous pouvez également ajouter des avatars au barrage, ajouter des bordures à chaque barrage et d'autres fonctions, qui seront ajoutées ultérieurement.
Enfin, donnez un composant de barrage de réaction simple https://github.com/forthealllight/react-barrage ;
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.