As usual, let’s look at the renderings first!

Let’s look at the implementation of Android.

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 DashPathEffect to create a gap!! 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 it’s 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 add 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. All you need to do here is scale down the mouth and 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 for the back eye is to enlarge the radius of the circle while turning into a 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)

  • The first part of the mouth flattens as the corners of the mouth move to the side. Here we need to animate ab to the sides (the corners on both sides also move), c to the top, and then back to the original position.

  • In the second part, the points A and B move closer to the center until they coincide, and at the same time a and B move up, the control points of de stretch until they form an ellipse.

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. We can get the scale of the Path according to PathMeasure (say 70% Path), so we can use ValueAnimator to draw the lead gets shorter with a scale from 0 to 1
// 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. In fact, it is a solid gold circle, and then a red circle border, white center, the three circles according to different speed and limit to zoom in and out animation (here the original design also added the function of color change, the golden circle will change color, can be implemented with ArgbEvaluator).

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.

The original link: www.jianshu.com/p/a622fa556…

At the end of the article

Your likes collection is the biggest encouragement to me! Welcome to follow me, share Android dry goods, exchange Android technology. If you have any comments or technical questions about this article, please leave a comment in the comments section.