Résumé des méthodes pour obtenir un effet de barrage (css et canvas)

Cet article présente principalement un résumé des méthodes pour obtenir l'effet barrage (css et canvas). Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. >Précédemment publié dans un Dans la page de loterie du terminal mobile, la fenêtre d'affichage des résultats de la loterie doit être affichée dans un carrousel de barrage. J'ai déjà traversé quelques pièges. Je vais maintenant résumer comment réaliser le barrage frontal. effet.

css3 implémente la version mendiante de barrage

optimisation des performances de barrage css3

canvas implémente barrage

Fonctions étendues de barrage de toile

1. Implémenter la version mendiante du barrage avec CSS3

(1) Comment implémenter le barrage via CSS3

Voyons d'abord comment implémenter le barrage le plus simple via CSS Le barrage :

Définissez d'abord la structure dom d'un barrage en HTML :

Le mouvement du barrage peut être réalisé en déplaçant ce bloc, en se déplaçant de droite à gauche. Prenons le barrage comme exemple. La position initiale du barrage est sur le côté le plus à gauche du conteneur et est cachée le long du bord (le côté le plus à gauche du barrage s'adapte au côté le plus à droite du conteneur). Cela peut être obtenu par positionnement absolu et transformation :

<p>我是弹幕</p>

<.>

Position initiale :

.block{
   position:absolute;
}

La position finale lors du déplacement vers l'extrême gauche est (le côté le plus à droite du barrage s'adapte au côté le plus à gauche du conteneur) :

from{
    left:100%;
    transform:translateX(0)
}

Position de départ Les illustrations spécifiques des positions et des positions finales sont les suivantes :

to{
   left:0;
   transform:translateX(-100%)
}

Une animation de barrage complète à deux images peut être définie en fonction de la position de départ et position de fin :

Introduisez cette animation à l'élément de barrage :

@keyframes barrage{
   from{
     left:100%;
     transform:translateX(0);
   }
   to{
     left:0;
     transform:translateX(-100%);
   }
}

De cette façon, vous pouvez obtenir une version mendiante de l'effet de barrage :

.block{
  position:absolute;
  /* other decorate style */
  animation:barrage 5s linear 0s;
}

(2) Défauts de mise en œuvre du barrage via le positionnement absolu et la gauche

Clarifiez d'abord le processus de rendu CSS

I) Selon HTML La structure génère un arbre DOM (l'arbre DOM contient des nœuds display:none)

• II) Basé sur l'arbre DOM, selon les attributs géométriques du nœud (marge/padding/largeur/hauteur/gauche, etc.) Générer un arbre de rendu

• III) Continuer à rendre des attributs tels que la couleur, la police, etc. en fonction du rendu arbre

• Si I Si les propriétés en ) et II) changent, une refusion se produira. Si seules les propriétés en III) changent, seule une repeinture se produira. Évidemment, cela se voit aussi dans le processus de rendu CSS : la redistribution doit s'accompagner d'un redessin.

reflow (reflow) : Lorsqu'une partie ou la totalité de l'arbre de rendu change en raison de la taille, des marges, etc., le processus qui doit être reconstruit est appelé reflow.

repaint (redraw) : lorsque certains attributs du changement d'élément, si la couleur d'arrière-plan d'apparence ne provoque pas de changements de mise en page et nécessite un nouveau rendu, le processus est appelé redessiner

reflow (reflow) affectera la vitesse de rendu du CSS du navigateur, donc lors de l'optimisation du Web performances de la page, il est nécessaire de réduire les redistributions.

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 provoquera une animation de barrage sur la page mobile. .

2. Optimisation des performances du barrage CSS3

Nous avons découvert que l'animation du barrage dans la première section a un problème bloqué. Voyons comment résoudre le problème d'animation. et s'est arrêté.

(1) Activez l'accélération matérielle pour CSS

Utilisez 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 manière la plus courante est d'activer l'accélération matérielle via des modifications 3D (attribut translation3d). Compte tenu de cela, nous modifions l'animation en :

De cette façon, nous pouvons activer l'accélération matérielle afin d'optimiser les performances des pages Web. 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.

@keyframes barrage{
   from{
     left:100%;
     transform:translate3d(0,0,0);
   }
   to{
     left:0;
     transform:translate3d(-100%,0,0);
   }
}

(2) Ne changez pas l'attribut gauche

La deuxième méthode consiste à trouver un moyen de ne pas changer la valeur de l'attribut gauche avant et après l'animation du barrage, afin que la redistribution ne se produise pas se produire.

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 couplerons donc js et css, Get la largeur de l'élément parent où se trouve le nœud de barrage dans js, puis définissez la position initiale du nœud de barrage en fonction de la largeur.

Prenons l'exemple de l'élément parent comme corps :

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, voici le nœud de barrage Afin d'empêcher l'affichage de la position initiale, 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.

但是这种css的实现方式，在实现弹幕的扩展功能方面比较麻烦，比如如何控制弹幕暂停等等。

3. canvas实现弹幕

除了通过css实现弹幕的方法之外，通过canvas也可以实现弹幕。

通过canvas实现弹幕的原理就是时时的重绘文字，下面来一步步的实现。

• 获取画布

  let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

• 绘制文字

ctx.font = '20px Microsoft YaHei';          
ctx.fillStyle = '#000000';                
ctx.fillText('canvas 绘制文字', x, y);

上面的fillText就是实现弹幕效果的主要api，其中x表示横方向的坐标，y表示纵方向的坐标，只要时时的改变x，y进行重绘，就可以实现动态的弹幕效果。

• 清除绘制内容

  ctx.clearRect(0, 0, width, height);

• 具体实现

通过定时器，定时改变x,y,每次改变之前先进性清屏，然后根据改变后的x,y进行重绘。当存在多条弹幕的情况下,定义：

let colorArr=_this.getColor(color);  弹幕数组多对应的颜色数组
let numArrL=_this.getLeft();  弹幕数组所对应的x坐标位置数组
let numArrT=_this.getTop();  弹幕数组所对应的y坐标位置数组
let speedArr=_this.getSpeed(); 弹幕数组所对应的弹幕移动速度数组

定时的重绘弹幕函数为：

_this.timer=setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    for(let j=0;j<barragelist.length><p>实现的效果为：</p>
<p><span class="img-wrap"><img src="https://img.php.cn//upload/image/655/667/209/1532493329346452.gif" title="1532493329346452.gif" alt="Résumé des méthodes pour obtenir un effet de barrage (css et canvas)"></span></p>
<h2>4. canva弹幕的扩展功能</h2>
<p>通过canvas实现弹幕的方式，很方便做比如暂停弹幕滚动等扩展功能，此外，也可以给弹幕增加头像，给每条弹幕增加边框等等功能，以后再补充。</p>
<p>相关推荐：</p>
<p><a href="http://www.php.cn/html5-tutorial-406922.html" target="_blank" title="H5微信支付之引入微信的js-sdk包失败的解决方法">H5微信支付之引入微信的js-sdk包失败的解决方法</a></p>
<p><a href="http://www.php.cn/html5-tutorial-406614.html" target="_blank" title="使用h5 canvas实现时钟的动态效果">使用h5 canvas实现时钟的动态效果</a></p>
<div></div></barragelist.length>

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!