First take a look at an effect map (LICEcap recorded point card, can see)



Clarify the general process:



The next implementation: the bullet screen view pops up from the bottom, and the animation scrolls up in turn. When it comes out of the screen, it will be removed and added to the reuse queue for next use.

Define related attributes:

  1. Determine the total number of bullet-screen itemView (total area height/minimum height) required according to the bullet-screen area, and add it to the bottom of the bullet-screen control



  1. Append a new piece of data (since animation is required, the next piece of data can only be processed after the animation of the current piece of data is completed, and two sections need to be defined: the processing section and the waiting section)



  1. Append data and pop up

Take the itemView from the processing area and initialize its position to be displayed, calculate its width and height, then iterate over the display item and animate the item to be displayed



Perform animation (upOffsetHeight is the height of the barrage to be displayed)



. After the animation is complete, proceed with:

Iterate through the item of the display area. If the screen has been completely removed, it is recycled to the undisplay area for reuse.



Update the currently drawn barrage partition: No display – > Display

Continue processing wait area data



That’s the general idea.

Yesterday, I spent about an hour to complete this function, without optimization, just for reference.

The Demo address: https://github.com/Winerywine/BarrageView.git