Summary of methods for implementing barrage effects on the front end (including implementation methods of css3 and canvas)

In the past, on a mobile lottery page, the display window of the lottery results needed to display a barrage carousel. I have gone through some pitfalls before. Now I will summarize how to achieve the front-end barrage effect.

• css3 implements beggar version of barrage
• css3 barrage performance optimization
• canvas implements barrage
• Extended functions of canvas barrage

First, let’s look at how to implement the simplest barrage through CSS:

First define the dom structure of a barrage in HTML:

 <div class=block>I am Danmaku</div>

The movement of the barrage can be achieved by moving this block. Taking the barrage moving from right to left as an example, the initial position of the barrage is at the leftmost side of the container and the edge is hidden (the leftmost side of the barrage is the same as the rightmost side of the container). Fitting) can be achieved by absolute positioning and transform:

 .block{ position:absolute;}

Initial position:

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

The end position of moving to the far left is (the rightmost side of the barrage is aligned with the leftmost side of the container):

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

The specific illustrations of the starting position and ending position are as follows:

A complete two-frame barrage animation can be defined based on the starting position and ending position:

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

Introduce this animation to the barrage element:

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

In this way, a beggar’s version of the barrage effect can be achieved:

First, let’s clarify the rendering process of css

I) Generate a DOM tree based on the structure of HTML (the DOM tree contains display:none nodes) II) Based on the DOM tree, generate a render tree based on the geometric attributes of the nodes (margin/padding/width/height/left, etc.) III) Continue to render attributes such as color and font based on the render tree

If the properties in I) and II) change, reflow will occur. If only the properties in III) change, only repaint will occur. Obviously we can also see from the CSS rendering process: reflow must be accompanied by redrawing.

reflow (reflow): When part or all of the render tree changes due to size, margin, etc., the process needs to be rebuilt. Repaint (redraw): When some attributes of the element change, such as the appearance and background color, it will not cause layout The process of re-rendering due to changes is called redrawing

Reflow will affect the rendering speed of browser CSS, so when optimizing web page performance, it is necessary to reduce the occurrence of reflow.

In the first section, we used the left attribute to achieve the effect of barrage. Left will change the layout of the element, so reflow will occur, which will cause the barrage animation to freeze on the mobile page.

We have discovered that the barrage animation in the first section has a stuck problem. Let’s see how to solve the stuck animation.

Use CSS to enable hardware acceleration in the browser and use the GPU (Graphics Processing Unit) to improve web page performance. In view of this, we can use the power of the GPU to make our website or application perform more smoothly.

CSS animations, transforms and transitions do not automatically enable GPU acceleration, but are performed by the browser's slow software rendering engine. So how can we switch to GPU mode? Many browsers provide certain triggered CSS rules.

The more common way is that we can turn on hardware acceleration through 3D changes (translate3d attribute). In view of this, we modify the animation as:

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

In this way, you can optimize web page performance by turning on hardware acceleration. However, this method does not fundamentally solve the problem. At the same time, using the GPU increases memory usage, which will reduce the battery life of the mobile device and so on.

(2)Do not change the left attribute

The second method is to find a way not to change the value of the left attribute before and after the barrage animation, so that reflow will not occur.

We want to determine the initial position of the barrage node only through translateX, but translateX(-100%) is relative to the barrage node itself, not to the parent element, so we couple js and css to get the barrage in js The width of the parent element where the node is located, and then the initial position of the barrage node is defined based on the width.

Take for example when the parent element is body:

 //css .block{ position:absolute; left:0; visibility:hidden; /* other decorate style */ animation:barrage 5s linear 0s;}//jslet style = document.createElement('style');document.head .appendChild(style);let width = window.innerWidth;let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;let to = `to { visibility: visible; -webkit-transform: translateX(-100%); }`;style.sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);

In addition to coupling js to calculate the width of the parent element to determine the initial position of the barrage node, in order to prevent the initial position from being displayed in the barrage node, we added the visibility:hidden attribute. Prevent barrage nodes from being displayed in the parent container before the initial position is determined. The barrage will only become visible if it starts scrolling from its initial position.

However, this CSS implementation method is more troublesome in realizing the extended functions of barrage, such as how to control the pause of barrage and so on.

In addition to the method of realizing barrage through css, barrage can also be realized through canvas.

The principle of implementing barrage through canvas is to redraw text from time to time. Let’s implement it step by step.

Get canvas

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

Draw text

 ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('canvas draws text', x, y);

The fillText above is the main API to achieve the barrage effect, where x represents the horizontal coordinate and y represents the vertical coordinate. As long as x and y are changed from time to time and redrawn, the dynamic barrage effect can be achieved. Copy code

Clear drawing content

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

Through the timer, x, y is changed regularly. Before each change, the screen is cleared first, and then redrawn based on the changed x, y. When there are multiple barrages, define:

 let colorArr=_this.getColor(color); The color array corresponding to the barrage array let numArrL=_this.getLeft(); The x-coordinate position array corresponding to the barrage array let numArrT=_this.getTop(); The barrage array The corresponding y coordinate position array let speedArr=_this.getSpeed(); The barrage moving speed array corresponding to the barrage array

The scheduled redraw barrage function is:

 _this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=speedArr[j]; ctx.fillStyle = colorArr[j] ctx.fillText(barrageList[j],numArrL[j],numArrT[j]); ctx.restore(); },16.7);

The effect achieved is:

Implementing barrage through canvas is very convenient for extended functions such as pausing barrage scrolling. In addition, you can also add avatars to barrage, add borders to each barrage, and other functions, which will be added later.

Finally, give a simple react barrage component; https://github.com/forthealllight/react-barrage

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.