“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

The final rendering

Yesterday basically said the main implementation ideas, today to write code.

Take a look at the HTML structure first

There are two layers of for loop, the outer layer is to generate 4 barrage tracks, and the inner layer is to generate the barrage elements in each track. Look at the bullet screen element. (Bleep: Every time I write code, I feel terrible.)

Each e barrage element is bound to three events. (In fact, you can use bubble to write performance may be a little better, the first time no experience)

Click event: monitor whether the barrage is clicked, if it is clicked, the barrage will be suspended.

The other two are for listening to the beginning and end of the animation.

Data-index, the binding ID is to get the specific information of the barrage, such as the width.

There is also a WX: IF controlled destruction.

The next step is code.

Async onAnimationstart(e) {async onAnimationstart(e) {let {INDEX} = e.target. Dataset // Async onAnimationstart(e) {async onAnimationstart(e) {let {INDEX} = e.target This.getindexarr (index) const idName = 'message${newIndex[0]}${newIndex[1]}' const query = this.createSelectorQuery() query.select(`#${idName}`).boundingClientRect(res => { const { windowWidth } = This.data. $. GlobalConfig const Speed = math.ceil (windowWidth/7) // Calculates how long it takes for the element to fully appear on the screen. const time = Math.ceil(res.width/speed) const key = `totalMessage[${ newIndex[0] }][${newIndex[1]+1}].isShow` // Does the next element have if(! TotalMessage [newIndex[0]][newIndex[1]+1]) return setTimeout(() => {this.setData({[key]: true, }) }, time*1000); }) query.exec() },Copy the code

emm.. This completes the function at the beginning of the animation

     const { windowWidth } = this.data.$.globalConfig
     const speed = Math.ceil(windowWidth/7)
Copy the code

This is to get the width of the screen, 7 should be the animation time THAT I set. Oh, I forgot to mention that I used @keyframes to define animation.

Next comes the end of the animation function

OnAnimationend (e) {let {INDEX} = e.target. Dataset // newIndex = this.getIndexArr (INDEX) Const key = 'totalMessage[${newIndex[0]}][${newIndex[1]}]. IsShow' this.setData({[key]: false }) }, OnAnimationend (e) {let {INDEX} = e.target. Dataset // newIndex = this.getIndexArr (INDEX) Const key = 'totalMessage[${newIndex[0]}][${newIndex[1]}]. IsShow' this.setData({[key]: false }) }, // Get index array getIndexarr(indexStr) {const newIndex = indexstr.replace (/\&/g,',').split(',') newindex.foreach ((item,idx) => { newIndex[idx] = item - 0 }) return newIndex },Copy the code

emm… Now the whole process from appearance to disappearance of barrage is basically realized.

There is also a bullet barrage pause that is not implemented, because I think I have a big problem implementing it, and I will wait until version 2.0. I destroy the current barrage every time I click a barrage, and then get the location of the barrage to be destroyed. In HTML, I also have a view element that controls whether the barrage is displayed or not by hidden. If a barrage is clicked, it will be displayed and the information of the barrage will be given to it.

This makes it look like the original element paused, but it isn’t.

This is done because it seems that @Keyframes animation cannot be paused.

There has to be a better solution, but I haven’t seen one yet.