Custom view to achieve super germinating sense of small bombs

Hello, guys, I’m back. These days some friends ask me why I haven’t updated. There’s a reason for that. First of all, I’ve been a little busy lately. Secondly, I didn’t see any funny animation! Finally, I updated it!! The ThreadLocal source code is fully parsed, except that you are not interested in the source code, and you ignore ！！！！ Ignored!! Also, I actually updated a mint tape measure, but I thought it was a little simple, and there was nothing to talk about, so I just uploaded it to Github without any articles. The pleasantries are over, and now we’re on our way to the germinating little bomb. First of all, I would like to thank the author for designing such a great animation! Design point me. Amazing:

Look at
androidThe realization effect of.

Below we and the custom view to achieve super germinating sense of the sun, like the beginning of the analysis animation! (Friends who have not seen the weather sun can go to see the weather sun first, some weather sun will not talk about the routine, at the same time need to master path, camera, Bezier curve, etc., otherwise part of the code may cause discomfort).

Let’s draw the static view first, and then animate it, Let’s go.

1. The floor

You can see that the floor is actually a straight line. Then the two gaps in the middle. How does this work? If you look at little Sun, you might say, that’s easy. Just draw a line and cover the two white intervals. Yes, this can be done, but if you look closely, you can see that the notch below is made of two semicircles plus a rectangle, which is a bit troublesome and makes it difficult to move the notch position. What’s the easy way? Yes, that is to use Path to draw a straight line, and then set the round head, and then set the DashPathEffect to achieve the interval (the gap in this view is achieved by using this feature, if you are not familiar with it). The code is as follows:

float[] groundEffectFloat=new float[] {bombLineWidth/4,bombLineWidth/2+bombLineWidth,bombLineWidth*2,bombLineWidth/3*2+bombLineWidth,getMeasuredWidth(),0}; GroundDashPathEffect =new DashPathEffect(groundEffectFloat,0); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(bombLineColor); mPaint.setPathEffect(groundDashPathEffect); // Set the dotted line effect mpath.reset (); mPath.moveTo(bombLineWidth/2,getMeasuredHeight()-bombLineWidth/2); mPath.lineTo(getMeasuredWidth()-bombLineWidth/2,getMeasuredHeight()- bombLineWidth/2); canvas.drawPath(mPath,mPaint);Copy the code

2. Body borders

Take a closer look! You’re smart enough to say it’s too easy, it’s just a circle and then use it again
DashPathEffectRealization gap is not ok!! Well, yeah, that’s it. Put the code directly:

        mPaint.setPathEffect(bodyDashPathEffect);
        mPaint.setColor(bombLineColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPath.reset();
        mPath.addCircle(bombCenterX,bombCenterY,bodyRadius,   
        Path.Direction.CW);
        canvas.drawPath(mPath,mPaint);
        canvas.restore();
Copy the code

Simple! It couldn’t be simpler. Let’s look at the body

3. The body

You can see that the body is really just a circle, and then you add a highlight in the upper left corner. So how does highlighting work? Three highlights, very simple, arc with Path, then use the DashPathEffect effect, perfect. What about the other highlight? Look at the picture.

You can see it’s an arc and a path, and then clipped to stay inside the circle. The path is formed by taking two points in radians and drawing them with Bezier curves. The control points are located in the dividing line of radians (red points below).

The code is as follows :(part of the code, highlighted in the upper left corner, others please check the source code)

// mPaint. SetPathEffect (null); mRectF.set(bombCenterX-bodyRadius+bombLineWidth/2,bombCenterY-bodyRadius+bombLineWidth/2 ,bombCenterX+bodyRadius-bombLineWidth/2,getMeasuredHeight()-bombLineWidth-bombLineWidth/2); Canvas. DrawArc (mRectF, 160100, false, mPaint); MPath. Reset (); mPath.addCircle(bombCenterX,bombCenterY,bodyRadius-bombLineWidth/2, Path.Direction.CCW); canvas.save(); canvas.clipPath(mPath); // Trim the circle inside mPaint. SetStyle (paint.style.fill); mPaint.setColor(lightColor); canvas.drawPath(mBodyLightPath,mPaint); canvas.restore();Copy the code

4. The face

As you can see, okay you’re a little complicated, but it’s okay. This is a little bit complicated because of the z-axis rotation, so let’s move to the middle.

Looks easy, eyes and dimples easy, 4 circles!! Mouth, this… This is kind of gross. Not really. Look at the picture.

It’s just a circle and then you have a path diagram, and the red dots are the control points. Hollow points represent nodes. Careful friends may find it wrong. It’s not all red under the tongue, it’s separate from the mouth. Here, I just need to scale it down to the mouth, and then do an Xfermode with the mouth. Part code:

// Draw the circle of the tongue intersecting the scale of the mouth, Int save= canvas.savelayer (0,0,getMeasuredWidth(),getMeasuredHeight(),null, canvas.all_save_flag); canvas.drawPath(mPath,mPaint); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); mPaint.setColor(Color.parseColor("#f34671")); Canvas. Methods like drawCircle (bombCenterX, mouthY + (mouthMaxY - mouthY) / 8 + bodyRadius/(5-1.4 f * mouthOffsetPercent), bodyRadius / 5, mPaint); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); Canvas. Scale (0.8 f, 0.8 f, bombCenterX, (mouthMaxY + mouthY) / 2); canvas.drawPath(mPath,mPaint); canvas.restoreToCount(save); mPaint.setXfermode(null);Copy the code

5. The shadow on your face

A look, a few good friends said, you will not let me use Bessel curve again! This is hard to find!! Calm down, this implementation is as follows:

As simple as that, two circles take the intersecting parts of the red circle.

Int save= canvas.savelayer (0,0,getMeasuredWidth(),getMeasuredHeight(),null, canvas.all_save_flag); mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(bombShadowColor); canvas.drawCircle(bombCenterX,bombCenterY,bodyRadius-bombLineWidth/2,mPaint); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); canvas.translate(-bodyRadius/5,-bodyRadius/5); mPaint.setColor(bombColor); canvas.drawCircle(bombCenterX,bombCenterY,bodyRadius-bombLineWidth/2,mPaint); canvas.restoreToCount(save); mPaint.setXfermode(null);Copy the code

Head of 6.

Little friend says again. It’s hard to draw, it’s hard to draw!! Calm down. This is actually easier. Just put your head on the back layer of your body. Look at the picture:

Code:

Too easy, I don't want to post, pretend I'm codeCopy the code

7. Lead

This lead, in fact, is a line curve, Bezier curve continue to play (do not explain, do not understand the wall please go to).

8. Explosion effect

It’s not that easy. 4 circles, from the largest to the smallest, and then hollowed out in the middle. so easy!!

Int the save = canvas. SaveLayer (0, 0, getMeasuredWidth () and getMeasuredHeight (), null, canvas, ALL_SAVE_FLAG); float distance = maxBlastCircleRadius/12; / / draw circles mPaint setColor (lightColor); canvas.drawCircle(bombCenterX,circleY, currentBlastCircleRadius,mPaint); mPaint.setColor(bombColor); canvas.drawCircle(bombCenterX,circleY, currentBlastCircleRadius -distance,mPaint); mPaint.setColor(bombLineColor); canvas.drawCircle(bombCenterX,circleY, currentBlastCircleRadius -distance*2,mPaint); mPaint.setColor(lightColor); canvas.drawCircle(bombCenterX,circleY, currentBlastCircleRadius -distance*3,mPaint); If (blastCiradiusPercent >0.65) {mPaint. SetXfermode (new PorterDuffXfermode(porterduff.mode.dst_out)); Canvas. drawCircle(bombCenterX, circleY, currentBlastCircleRadius - maxBlastCircleRadius * 0.65f, mPaint); mPaint.setXfermode(null); } canvas.restoreToCount(save);Copy the code

At this point, we are halfway done, that is the display of the little bomb, and now it is time to animate! To play again

9. Animate your face from side to side

You can see it moving left to right, at the time of movement and then we just add an offset to the time of drawing the face, and as it moves, you can see that the face rotates around the center of the bomb body. So here’s the code

        canvas.save();
        mCamera.save();
        mCamera.rotate(bombTBRotate,0,-bombLRRotate/3);
        mMatrix.reset();
        mCamera.getMatrix(mMatrix);
        mCamera.restore();
        mMatrix.preTranslate(-bombCenterX,-(bombCenterY));
        mMatrix.postTranslate(bombCenterX,bombCenterY);
        mMatrix.postTranslate(faceLROffset,faceTBOffset);
        canvas.setMatrix(mMatrix);
Copy the code

Use camera to rotate the Z axis, then translate left and right, then use ValueAnimator to set the offset, and there you go! During the movement, you can see the eye narrowing effect. This is very simple, you can use the eye ellipse, keep the width the same, change the height is ok.

10. Rotate the body head lead left and right

This is easier, just use camera rotation transformation to get Martix before drawing, and then transform canvas.

11. Move your face up and down

First, move the face up and down the same way you move the face left and right using Matrix.Translate. The same goes for eye changes. The zoom effect of the back eye is to enlarge the radius of the circle at the time of the round eye. The transformation of the mouth is relatively complex! Look at the picture, high energy early warning, I do not know I do not speak clearly ！！！！

This is the picture of the mouth just now!! The mouth animation has two parts! ! (The following statements may cause discomfort)

• In the first part, the corners of the mouth move sideways, flattening the mouth. So here we need to putabMove the two points to the side using the property animation (corner points on both sides also move).cThe dot moves up and then comes back to its original position.
• The second part isabThe two points converge to the middle, until AB coincides, and at the same timeabIf I move up at two,deThe control points are simultaneously elongated until an ellipse is formed.

Don’t understand!! I don’t understand. Imagine again. Spatial ability. If you don’t get it, forget it. After all, I don’t use it much.

12. Bomb fuse, lighting effect

The bomb fuse effect also has two parts

• One is that the lead gets shorter and can be based onPathMeasureTo obtainPathThe proportion ofPath(e.g.,70%thePath) so that we can passValueAnimatorWith a0to1To draw the effect of the lead getting shorter

// mPathMeasure. SetPath (mHeadLinePath,false); mPath.reset(); mPathMeasure.getSegment(0,mPathMeasure.getLength()*headLinePercent,mPath,true); DrawPath (mPath,mPaint); // Canvas. DrawPath (mPath,mPaint);Copy the code

• The second part is the effect of lighting. It’s basically a solid gold circle, and then a red circle with white in the middle, and the three circles zoom in and out at different rates and limits.

13. Explosion animation

And lead animation type, 4 circles do zoom in and zoom out animation, just to a certain size, and then circle small leak, and leak gradually enlarged.

14. Conclusion

Well, that’s the end of our little germinating bomb. Hope friends can gain, master more custom view routines, more analysis methods, we will see you next time (any fun or want to achieve animation is also welcome to tell me, custom view, controls are ok)

Source point I