Results show

Implementation steps

1. Draw a circle mask

Here we use mixed Mode to achieve the circle part of the deduction, here we use porterduff.mode. CLEAR

Private void drawCircleMask(canvas) {canvas.save(); // Dst canvas. DrawRect (new Rect(0,0,getWidth(),getHeight()), mPaint); // Set the blending Mode mPaint. SetXfermode (new PorterDuffXfermode(porterduff.mode.clear)); DrawCircle (getWidth() / 2, getWidth() / 2, getWidth() / 3, mPaint); drawCircle(getWidth() / 2, getWidth() / 3, mPaint); // Clear mixed mode mPaint. SetXfermode (null); canvas.restore(); }Copy the code

The effect is as follows

2. Draw two circles of animation effects

The two pictures we draw are as follows

What we need to do is to scale the Bitmap to the same size as the previous mask effect circle by calculating. Since the two images we use here are the same size, we only need to calculate the scale ratio between the inner circle image and the mask circle, since the radius we set for the mask circle is:Control width / 3

Therefore, the width and height of our scaled circle Bitmap should be the total length of the red part in the middle plus the blue part on both sides as shown below

The middle part of the red line is: control width / 3, and the blue part can be measured by PhotoShop and other tools, and then calculated according to the proportion of the red part, the code is as follows, where mInnerCircleBitmap is the inner circle, mOutCircleBitmap is the outer circle

Private void drawBitmapCircle(Canvas Canvas){if(mInnerCircleBitmap == null){int dstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4); mInnerCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_innercircle); mInnerCircleBitmap = Bitmap.createScaledBitmap(mInnerCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true); } if(mOutCircleBitmap == null){int dstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4); mOutCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_outcircle); mOutCircleBitmap = Bitmap.createScaledBitmap(mOutCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true); } int left = (getWidth() - mInnerCircleBitmap.getWidth()) / 2; Int top = (int) (getWidth() / 2-getwidth () / 3-getwidth () / 1.5f / 8); canvas.drawBitmap(mInnerCircleBitmap,left,top,mPaint); canvas.drawBitmap(mOutCircleBitmap,left,top,mPaint); }Copy the code

The effect is as follows

3. Realize the rotation animation effect

ValueAnimator is used to rotate the circles. From the beginning of this article, we can see that the two circles are rotated in different directions, so we should logically note that one is rotated clockwise and the other is rotated anticlockwise, as shown below

private float mDegress = 0; Private void init() {valueAnimator = valueanimator.offloat (0f, 360f); valueAnimator.setRepeatCount(ValueAnimator.INFINITE); valueAnimator.setRepeatMode(ValueAnimator.RESTART); valueAnimator.setInterpolator(new LinearInterpolator()); valueAnimator.setDuration(6000); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mDegress = (float) animation.getAnimatedValue(); postInvalidate(); }}); valueAnimator.start(); Private void drawBitmapCircle(Canvas Canvas){if(mInnerCircleBitmap == null){int DstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4); dstWidthAndHeight = (int) (getWidth() / 1.5f / 4); mInnerCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_innercircle); mInnerCircleBitmap = Bitmap.createScaledBitmap(mInnerCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true); } if(mOutCircleBitmap == null){int dstWidthAndHeight = (int) (getWidth() / 1.5f + getWidth() / 1.5f / 4); mOutCircleBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_checkface_outcircle); mOutCircleBitmap = Bitmap.createScaledBitmap(mOutCircleBitmap,dstWidthAndHeight,dstWidthAndHeight,true); } int left = (getWidth() - mInnerCircleBitmap.getWidth()) / 2; Int top = (int) (getWidth() / 2-getwidth () / 3-getwidth () / 1.5f / 8); // Rotate canvas.save() clockwise; canvas.rotate(mDegress,getWidth() / 2, getWidth() / 2); canvas.drawBitmap(mInnerCircleBitmap,left,top,mPaint); canvas.restore(); // Rotate canvas. Save () counterclockwise; canvas.rotate(-mDegress,getWidth() / 2, getWidth() / 2); canvas.drawBitmap(mOutCircleBitmap,left,top,mPaint); canvas.restore(); }Copy the code

The effect is as follows

4. Add prompt text

Drawing text is relatively simple, mainly used to prompt the user to perform the operation, the code is as follows

Canvas. DrawText (" Please move face into circle ",getWidth() / 2, (float) (getWidth() * 1.2),mTextPaint); canvas. DrawText (" Please move face into circle ",getWidth() / 2, (float) (getWidth() * 1.2),mTextPaint);Copy the code

The end result is as follows

Example source code

The above implementation steps in the source CODE I are split open, detailed complete code you can obtain the following address gitee.com/itfitness/f…

The original link: www.jianshu.com/p/9383ce973…

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.