Based on the Android fade-in screen implementation

recently, the need to show comments in a user-published image is in the form of a fade-out pop-up. requirements for the fade-in event t1-> fade out T2, all the barrage began to play sequentially, the middle of a certain interval deltat. After careful consideration, think of the following implementation methods, which are summarized and implemented, analyzed and compared.

It may be assumed that the canvas of the barrage is Barrageview, and that each barrage is drawn as a barrageitemview.

• Property Animations

Starting with just one barrage, we need to design a property animation that is responsible for fading in:

Start the fade-out animation in the completion callback function Onanimationend of the animation, and in the fade-out animation's completion callback function, remove the barrageitemview . This completes the display process of a barrage.

The same logic applies to multiple barrage displays.

Using this method, the play of the play in sequence is a difficult point: we need to open another notification thread (timer), at every deltat time, the Barrageview (the barrage canvas) notice, Tell it you can play a new barrage.

So in each barrageview we need to build a handle To process the notification message when barrrageview is as listview or item is Recyclerview , a large number of barrageview may be displayed through the user's activity, This will build a large number of handler , which is also a challenge to system performance. However, if you are in recyclerview item , recyclerview When the viewholder is reused, it can also be judged and reused in handler implementations to minimize waste of resources. There are some problems with this implementation: too many barrageitemview and property animation creation. This approach not only affects the performance of the application, but the management of each barrage and attribute animation challenges the code implementation.

barrageitemview and . When the user closes the barrage, the system needs to cancel animation, which needs to call the barrageitemview of the animation. remove operation because it is in the main thread while the objectanimator and Barrageitemview is added in handler , then such processing involves a multi-threaded access problem, which is likely to cause the same arraylist adds a delete conflict, resulting in crash , where management implementations are particularly cautious.

Animation management may consider using the attribute animation collection Animatorset, although in the animation management will be convenient point, but the above problems still exist, is inevitable. If you encounter a bounce > stop -and-bounce logic, the number of animations more,Animatorset has certain advantages.

In the process of implementation, I found that the biggest problem was the management of Objectanimator and Barrageitemview , when the screen was closed (Clear), If there is an error in deleting a pop-up or an animated cancel , the logic in the screen is confusing. If the comment has N , if a new Barrageitemviewis created based on the comment each time the screen is created, then if the above logic goes wrong,Barrageview There are often a lot of repetitive barrage. Therefore, all comments must be created to create all the barrage, receive a notification message, play a piece, such logic is relatively clear.

• Canvas Drawing

The core idea is to set the Alphaof the paint , and to draw the bitmap in the OnDraw method, the specific scheme and process are as follows:

1. Define a bullet-screen canvas that can be used by XML :barrageview

2. Basic Variable initialization

Use a custom data structure to store member variables for the barrage:

In the function of Barrageview, the CURALPHA member variable of the barrage data structure is initialized, because it is necessary to solve the problem of time interval deltat of the barrage, so the Curalpha value list is initialized to-*i*alpha_ by calculation. Start_step, when the Curalpha value is negative, it is not drawn, and in the next draw time slot the value is increased by Fade_step , and when it is greater than 0 o'clock, it is drawn according to the painter algorithm using paint overlay. Here Alpha_start_step represents the time gap between the various barrage deltat.

3. Create the Barrageitemviewof each barrage and convert it into Bitmap.

4, in the OnDraw method to achieve the Bitmap of the plotting logic of the barrage:

Judging the current each barrage, is in the fading or fading state, if the former, the Alpha value is increased, painted with paint , the latter is reduced.

In order to implement fade -In, stop-and-fade logic, you can let alpha increase the maximum value greater than 255, but judge it when it is actually drawn, if the current Alpha Greater than 255, then choose 255 to draw, that is, to achieve the stay effect.

Fade in implementation:

Fade-out implementation logic is similar, but after fading out, you need to update the address location, enabling the pop-up to choose another random location for the next playback.

When all draws are complete, the call is:

In the next time slot to insert the interface redraw logo, to achieve a continuous display of the barrage.

It is worth noting that Fade_step is the calculated alpha value change rate, when calculating it, take into account that Android system every 16ms will emit VSYNC signal notification system for rendering. So pay attention to two points: all the actions that need to be performed in the OnDraw must be completed at 16MS, otherwise it will cause the drop frame to not be calculated at the next drawing, and the fade_step value will not be set too small, because we'll call the trigger algorithm manually for the next draw. so excessive redraw signals are also weighed against the system's vsync signal, so tradeoffs are needed here.

5. Implement Response Events:

Since the form of the barrage is no longer a View, it is Bitmap, so the click event of the entire barrage canvas needs to be controlled using gesturedetectorcompat :

This method has been tested and found to be more efficient, but there is a big problem: if the screen display only text, then the method of efficiency and performance are very good, but also to complete the requirements. But if the screen includes a picture (such as an avatar), then the request for the picture will be an asynchronous process. It is difficult to guarantee that the picture has been loaded when the Bitmap is generated.

• Ondraw Set the Alpha of each bullet screen

The scheme realizes logic and scenario two very much like, no longer repeat detailed logic, the difference is that each barrageitemview data structure is no longer stored Bitmap, but directly stored View or Layout . This is a perfect solution to the above picture loading problem. Instead of updating the Alphaof the paint each time the OnDraw method is called, the barrageitemview new Alpha value is obtained. Set it directly, such as fade-in control:

Simple test of the next performance, the use of mobile phone models:HUAWEI mt7-tl00; Android 4.4.2,level,ROM:huawei/emui/emotionui_3.0

Random display of some of the barrage canvas, uneven containing some of the barrage, testing, including the opening, closing, pausing, continuing, and so on,CPU occupancy monitoring results are as follows:

When playing smoothly:

Scenario One:7%-10%

Scenario Two:3%-7%

Scenario Three:3%-8%

For the monitoring of scenario three, the following actions were performed: Open, pause, resume playback, close, open. It can be seen that theDemo has a very low CPU occupancy rate without playing the barrage. Using property animations has the highest CPU occupancy, and requires a lot of animation creation, deletion, and execution, such as the need to update property animations and Barrrageitemview at management time, all with significant overhead.

Finally, attach one:

Based on the Android fade-in screen implementation