Detailed explanation of the implementation method of explosion effect of view in Android

This paper describes the implementation method of the explosion effect of view in Android. Share with you for your reference, as follows:

A few days ago, an excellent Android open source component brushed the screen on the microblog - explosionfield. The effect is very cool, which is a bit similar to the animation when MIUI uninstalls the app. Let's feel it first.

Explosionfield is not only effective, but also well written. People can't help reading it.

Create explosionfield

Explosionfield inherits from view, draws animation effects in OnDraw method, and provides an attach2window method, which can add explosionfield as the most child view to the root view on the activity.

The layoutparams property of explosionfield is set to match_ Parent, in this way, the particles exploded by a view can be drawn in the area where the whole activity is located.

Knowledge points: you can use window ID_ ANDROID_ Content instead of Android R.id. content

Vibration effect before explosion

In the View click event, call mExplosionField. After explode (V), the view first vibrates and then explodes.

The vibration effect is relatively simple. Set a [0,1] interval valueanimator, then randomly translate the X and Y coordinates in the onanimationupdate of animatorupdatelistener, and finally dynamically reduce the scale and alpha values to 0.

Create a bitmap based on the view

After the view vibrates, it starts the most difficult cracking, and the cracking is carried out at the same time as hiding. Let's take a look at the cracking API first-

void explode(Bitmap bitmap,Rect bound,long startDelay,long duration)

The first two parameters bitmap and bound are the key. The code to create bitmap through view is more interesting.

If the view is an ImageView and its drawable is a bitmapdrawable, you can directly obtain the bitmap.

If it is not an ImageView, you can create a bitmap as follows:

1. Create a new canvas

2. Create an empty bitmap according to the size of the view

3. Set the empty bitmap as the bottom cloth of canvas

4. Draw the view on canvas

5. Set the bitmap of canvas to null

Of course, the focus of the view should be cleared before drawing, because the focus may change the UI state of a view.

Scanvas used in the following code is a static variable, which can save the cost of each creation.

The author's method of creating bitmap is very ingenious. If oom is generated when creating bitmap, you can take the initiative to perform GC - system GC (), and then try to create it again.

The implementation of this function makes people admire the author's skill.

In addition to bitmap, there is a very important parameter bound, which is relatively simple to create:

First, get the global visual area of the view to be exploded - rect R, then get the coordinates of the explosionfield in the screen through getlocationonscreen (location), and translate the visual area of the exploded view according to this coordinate, so that the explosion effect will be displayed in the explosionfield. Finally, expand it according to the mxpandinset value (0 by default).

What's the use of creating bitmap and bound? Let's move on.

Create particles

Let's take a look at the whole picture of the method of exploding into particles:

Here we want to explain why we use a container class variable - mexplosions to save an explosionanimator. Because the explosion effect of multiple views in the activity may be carried out at the same time, the explosion animation corresponding to each view should be saved and deleted when the animation is finished.

The author has customized a class - explosionanimator, which inherits from valueanimator. It mainly does two things: one is to create particles - generateparticle, and the other is to draw particles (canvas).

Let's take a look at the constructor:

According to the constructor, we can know that the author divides the bitmap into a 17 x 17 matrix, and the width and height of each element are w and h respectively.

All particles are a 15 x 15 matrix, and the element color value is the pixel value corresponding to the bitmap.

The structure is shown in the figure below, in which the hollow part is particles.

Generateparticle will randomly generate a particle according to a certain algorithm. This part is cumbersome, and the analysis is omitted.

The more ingenious one is its draw method:

At the beginning, I was still confused. Since the particles were drawn in the OnDraw method of explosionfield, it must be refreshed constantly. As a result, the author did not do so, and the implementation method was really amazing.

First, the author overloaded the start () method in the explosionanimator class by calling mcontainer Invalidate (mbound) to refresh the block corresponding to the view to be cracked.

The mcontainer is a view - explosionfield full of activities, and its OnDraw method will call the draw method of explosionanimator.

In this way, a recursion is formed. The two call each other and refresh continuously until the alpha value of all particles becomes 0, and the refresh stops.

summary

The code quality of this open source library is quite high and I admire the author very much.

For more Android related content, readers who are interested can view the topics on this site: summary of Android view skills, summary of Android operating XML data skills, summary of activity operating skills of Android programming, summary of Android resource operating skills, summary of Android file operating skills, summary of Android operating SQLite database skills Summary of Android operating JSON format data skills, summary of Android database operating skills, summary of SD card operating methods for Android programming development, introduction and advanced tutorial for Android development, and summary of Android control usage

I hope this article will help you in Android programming.