android-Floating Background effect

Reproduced please indicate this article from the Big Corn Blog (http://blog.csdn.net/a396901990), thank you for your support!

：

GIF animation effect is not very good, the actual effect is very smooth very smooth, and add different graphics can be composed of various effects, is now used in our Project registration interface ~

Principle:

The principle of implementation is simple, each suspended "small object" is a custom view, these small custom view is placed in a custom viewgroup. Then all the views are placed above this viewgroup, which is equivalent to making a moving background.

The following code is described in detail below:

Explanation: Floatobject

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

Any object that needs to be drawn must inherit floatobject and override the provided Drawfloatobject method, where you can draw any shape by setting the brush and the canvas. For example, the following is a line of text:

 Public  class floattext extends floatobject {String text; Public Floattext(floatPosX,floatPosY, String text) {Super(PosX, PosY); This. Text = text; Setalpha ( the);    SetColor (Color.White); }@Override     Public void Drawfloatobject(Canvas canvas,floatXfloatY, Paint paint) {paint.settextsize ( $);    Canvas.drawtext (text, x, y, paint); }}

Random curve:

In fact, the most complicated part is to let the floating object do random irregular curve movement, and the speed of each floating thing is different, so that the whole floating animation is more natural.

I thought about using Brownian motion before, but I didn't find a good algorithm for a long time on the internet.

At the end of the day, we can only use the 3-point Bell curve to make the floating object move along a bell curve, and then randomly generate a new curve to achieve the random curve motion.

The code for the control movement is as follows:

 Public void Drawfloatitem(Canvas canvas) {Switch(status) { CaseSTART://Fade in                if(Isfade () && Alpha <= Alpha_limit)                    {Paint.setalpha (alpha);                Alpha + = Alpha_per_frame; }Else{setStatus (MOVE); } Break; CaseMOVE://Update the curve point of the match Bell                if(Mcurdistance = =0) {start =NewPointF (x, y); End = Getrandompoint ((int) Start.x, (int) Start.y, (int) distance);//value range distanceC1 = Getrandompoint ((int) Start.x, (int) Start.y, Random.nextint (Width/2));//value range WIDTH/2C2 = Getrandompoint (end.x, End.y, random.nextint (Width/2));//value range WIDTH/2}//Calculate the current point of the plug-Belle curvePointF bezierpoint = Calculatebezierpoint (mcurdistance/distance, start, C1, c2, end);                x = Bezierpoint.x; y = bezierpoint.y;//Update current pathMcurdistance + = Move_per_frame;//After a painting is reset                if(Mcurdistance >= distance) {mcurdistance =0; } Break; CaseEND://Fade out                if(Isfade () && Alpha >0) {Paint.setalpha (alpha);                Alpha-= Alpha_per_frame; }Else{setStatus (FINISH); } Break; }if(Status! = FINISH) {LOG.E ("Drawfloatobject", x+", "+y);        Drawfloatobject (canvas, x, y, paint); }    }

The algorithms for Seibel curve motion are all reused before writing an article on the Android simulated spark particle's sliding jet effect, if everyone is interested to see.

Floatbackground

Floatbackground inherits from Framelayout, which has a collection for storing floatobject.
The main function of Floatbackground is to draw all the "floats" and to maintain its life cycle:

Initialization

  privatevoidinitFloatObject(intint height) {        for (FloatObject floatObject : floats) {            int x = (int) (floatObject.posX * width);            int y = (int) (floatObject.posY * height);            floatObject.init(x, y, width, height);        }    }

Draw:

 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); for (FloatObject floatObject : floats) { floatObject.drawFloatItem(canvas); } // 隔一段时间重绘一次, 动画效果 getHandler().postDelayed(runnable, DELAY); } // 重绘线程 private Runnable runnable = new Runnable() { @Override public void run() { invalidate(); // 控制帧数 } };

Start and end:

    publicvoidstartFloat() {        for (FloatObject floatObject : floats) {            floatObject.setStatus(FloatObject.START);        }    }    publicvoidendFloat() {        for (FloatObject floatObject : floats) {            floatObject.setStatus(FloatObject.END);        }    }

Use

When used, it is very simple to set Floatbackground to the lowest view in the layout file (in fact, as a background):

<com. Dean. Library. FloatbackgroundAndroid:id="@+id/float_view"Android:layout_width="Match_parent"android:layout_height="Match_parent"> <linearlayout android:layout_gravity="Center"Android:layout_width="Match_parent"android:layout_height="Wrap_content"android:orientation="Vertical"> <button android:id="@+id/start"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"android:layout_gravity="Center"android:text="Start"/> <button android:id="@+id/end"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"android:layout_gravity="Center"android:text="End"/> </LinearLayout> </com. Dean. Library. Floatbackground>

Make the following call in your code:

Final Floatbackground Floatbackground = (floatbackground) This. Findviewbyid (R.id.float_view); Button start = (Button) This. Findviewbyid (R.id.start); Start.setonclicklistener (NewView.onclicklistener () {@Override Public voidOnClick (View v) {floatbackground.startfloat ();        }        }); Button end = (Button) This. Findviewbyid (R.id.end); End.setonclicklistener (NewView.onclicklistener () {@Override Public voidOnClick (View v) {floatbackground.endfloat ();        }        }); Floatbackground.addfloatview (NewFloatrect (0.2f,0.3f, -, +)); Floatbackground.addfloatview (NewFloatbitmap ( This,0.2f,0.3f, r.drawable.gr_ptn_03)); Floatbackground.addfloatview (NewFloatcircle (0.8f,0.8f)); Floatbackground.addfloatview (NewFloattext (0.3f,0.6f,"E")); Floatbackground.addfloatview (NewFloatring (0.6f,0.2f, the, -));

For example, when adding text "floating": Floatbackground.addfloatview (New Floattext (0.3f, 0.6f, "E"))
The three parameters received are the percentage of the birth position on the screen width, the long percentage, and the displayed text.

Github

Https://github.com/a396901990/FloatBackground

android-Floating Background effect