Method for making Android floating background effect

Gif animation effect is not very good, the actual effect is very smooth, and adding different graphics can form various effects. At present, it has been used in the registration interface of our project ~

Principle:

The implementation principle is very simple. Each suspended "small object" is a custom view. These small custom views are stored in a custom ViewGroup. Then all views are placed on the ViewGroup, which is equivalent to a movable background.

The following is a detailed description in combination with the code:

Detailed explanation:

FloatObject

Suspended objects, inherited from view, need to rewrite the OnDraw method. Their main function is to draw themselves and carry out random curve motion.

Any object to be drawn needs to inherit the floatobject and override the provided drawfloatobject method. In this method, you can draw any figure by setting the brush and canvas. For example, the following is a line of text:

Random curve:

In fact, the most complex part is to make the floating objects move in random and irregular curves, and the speed of each floating object is different, so that the whole floating animation is more natural.

I thought about using Brownian motion before, but I haven't found a good algorithm on the Internet for a long time.

Finally, the 3-point Seibel curve can only be used to make the floating object move along a Seibel curve. When it reaches the end point, a new curve is randomly generated, so that the random curve movement can be realized.

The code for controlling motion is as follows:

The algorithms for the motion of the Seibel curve reuse the previous article Android to simulate the sliding injection effect of spark particles. If you are interested, you can have a look.

FloatBackground

Floatbackground inherits from FrameLayout, which contains a collection for storing floatobjects. The main function of floatbackground is to draw all "floating objects" and maintain their life cycle:

initialization:

draw:

Start and end:

use

It is very simple to use. Set the floatbackground as the bottom view in the layout file (actually as a background):

Make the following calls in the code:

When "floating object": the three parameters received by floatbackground.addfloatview (New floattext (0.3f, "e")) are the percentage of birth position in screen width, the percentage of length, and the displayed text.

Github

https://github.com/a396901990/FloatBackground

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.