Method to Create Floating Background Effect in Android

The GIF animation effect is not very good, but the actual effect is very smooth, very smooth, and different shapes can be added to create various effects. It has already been used in our project's registration interface ~

Principle:

The implementation principle is very simple, each floating 'small object' is a custom View, and these small custom Views are placed in a custom ViewGroup. Then all the views are placed above this ViewGroup, which is equivalent to creating a movable background.

Below, we will introduce the code in detail:

Detailed Explanation:

FloatObject

Floating objects, inheriting from View, need to override the onDraw method, which is mainly used to draw themselves and perform random curvilinear motion.

Any object that needs to be drawn must inherit from FloatObject and override the provided drawFloatObject method, where you can draw any shape by setting the pen and canvas. For example, the following code is used to draw a line of text:

public class FloatText extends FloatObject {
 String text;
 public FloatText(float posX, float posY, String text) {
 super(posX, posY);
 this.text = text;
 setAlpha(88);
 setColor(Color.WHITE);
 }
 @Override
 public void drawFloatObject(Canvas canvas, float x, float y, Paint paint) {
 paint.setTextSize(65);
 canvas.drawText(text, x, y, paint);
 }
}

Random curve:

In fact, the most complex part is to make the floating object move randomly and irregularly, and each floating object has a different speed, so the whole floating animation is more natural.

I had thought of using Brownian motion, but after searching online for a long time, I couldn't find a good algorithm.

In the end, we still have to use3Plot the Bezier curve, so that the floating object moves along a Bezier curve, and when it reaches the end, a new curve is randomly generated to achieve random curve movement.

The code for controlling the movement is as follows:

public void drawFloatItem(Canvas canvas) {
 switch (status) {
  case START:
  // fade in
  if (isFade() && alpha <= ALPHA_LIMIT) {
   paint.setAlpha(alpha);
   alpha += ALPHA_PER_FRAME;
  } else {
   setStatus(MOVE);
  }
  break;
  case MOVE:
  // Update the Bezier curve point
  if (mCurDistance == 0) {
   start = new PointF(x, y);
   end = getRandomPoint((int)start.x, (int)start.y, (int) distance);// Value range distance
   c1 = getRandomPoint((int)start.x, (int)start.y, random.nextInt(width / 2)) // Value range width/2
   c2 = getRandomPoint(end.x, end.y, random.nextInt(width / 2))// Value range width/2
  }
  // Calculate the current point of the Bezier curve
  PointF bezierPoint = CalculateBezierPoint(mCurDistance / distance, start, c1, c2, end);
  x = bezierPoint.x;
  y = bezierPoint.y;
  // update current path
  mCurDistance += MOVE_PER_FRAME;
  // Reset after one segment is drawn
  if (mCurDistance >= distance) {
   mCurDistance = 0;
  }
  break;
  case END:
  // 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 saber curve motion are all reused from a previous articleANDROID simulation of spark particle sliding喷射 effect, if you are interested, you can take a look.

FloatBackground

FloatBackground inherits from FrameLayout and contains a collection for storing FloatObject.
The main function of FloatBackground is to draw all the 'floating objects' and maintain their lifecycle:

Initialization:

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

Drawing:

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 for (FloatObject floatObject : floats) {
  floatObject.drawFloatItem(canvas);
 }
 // Redraw after a period of time, for animation effect
 getHandler().postDelayed(runnable, DELAY);
 }
 // Redraw thread
 private Runnable runnable = new Runnable() {
 @Override
 public void run() {
  invalidate();
  // Control frame rate
 }
 };

Start and end:

 public void startFloat() {
 for (FloatObject floatObject : floats) {
  floatObject.setStatus(FloatObject.START);}
 }
 }
 public void endFloat() {
 for (FloatObject floatObject : floats) {
  floatObject.setStatus(FloatObject.END);
 }
 }

Use

It is very simple to use, set FloatBackground as the lowest level view in the layout file (which is actually used as a background):

 <com.dean.library.FloatBackground
 android: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>

The following call is made in the code:

final FloatBackground floatBackground = (FloatBackground) this.findViewById(R.id.float_view);
 Button start = (Button) this.findViewById(R.id.start);
 start.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  floatBackground.startFloat();
  }
 });
 Button end = (Button) this.findViewById(R.id.end);
 end.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  floatBackground.endFloat();
  }
 });
 floatBackground.addFloatView(new FloatRect(0.2f, 0.3f, 30, 40));
 floatBackground.addFloatView(new FloatBitmap( this, 0.2f, 0.3f, R.drawable.gr_ptn_03))
 floatBackground.addFloatView(new FloatCircle( 0.8f, 0.8f));
 floatBackground.addFloatView(new FloatText( 0.3f, 0.6f, "E"));
 floatBackground.addFloatView(new FloatRing( 0.6f, 0.2f, 15 ,20));

When adding a floating object: floatBackground.addFloatView(new FloatText( 0.3f, 0.6f, "E"))
The three parameters received are the percentage of the birth position in the screen width, the percentage of the length, and the displayed text.

Github

https://github.com/a396901990/FloatBackground

That's all for this article. I hope it will be helpful to everyone's study and that everyone will support the Naya Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.