Android animation - cute candle blowing animation

1. Introduction

Recently I started writing some articles to record some of my previous small projects or View definitions. I still need to sort out the dusty things. This only completes part of the animation of burning and extinguishing, and there is no animation of why the flame is lit. I hope that students who are interested can continue to complete and share. Without further ado, let's take a look at these two cute little candles.

The candle held its breath and ignited the flame, but was blown out by the guy next to it 0^0. It still looks very cute. Looking at the picture, you should be able to think of how to implement it, custom View! By the way, how to do this process well? Let's follow the steps and take a look. The code is a little bit long, please be patient. Interested students can clone it from my GITHUB and read the code.

2. Process Implementation

Drawing and animation of candles

• Based on object-oriented thinking, it is obvious that there are two candles here! In this case, we define a candle class with the basic properties of a candle.

 public abstract class ICandle { 
 
 
 //Lower left coordinate of the candle bottom 
 
 protected int mCurX; 
 
 protected int mCurY; 
 
 //Candle width and height 
 
    protected int mCandleWidth; 
 
    protected int mCandleHeight; 
 
 //The left eye coordinates of the candle 
 
    protected Point mEyeLPoint; 
 
 //The right eye coordinates of the candle 
 
    protected Point mEyeRPoint; 
 
 //Candle eye radius 
 
 protected int mEyeRadius; 
 
 //Eye distance 
 
 protected int mEyeDevide; 
 
 //Body color 
 
    protected int mCandleColor; 
 
 //Stop the animation? 
 
    protected boolean mIsAnimStoping = false ; 
 
 //Candle wick coordinates 
 
    protected Point mCandlewickPoint; 
 
 public void initAnim(){ 
 
 } 
 
 public void stopAnim(){ 
 
 } 
 
 public void drawSelf(Canvas canvas){ 
 
 } 
 
 }

There is also code corresponding to this candle, which is clear at a glance. The following methods may need to be explained: public void initAnim(), stopAnim() initializes the data needed to start and end the animation. The small candle will implement this method, drawSelf(Canvas canvas) passes in the canvas and then the candle draws itself.

Now it's time for us to take a look at the internal structure of the little candle, hiahiahiahia!

No, the candle is accompanied by flames! Let's look at the flames first, because the candle will burn itself later. +10086s

Flame

• Let's take a look at our Fulham first

There doesn't seem to be anything wrong with it. First of all, the inner area is Flame, and the outer area is the light of humanity emitted by Mr. Flame burning himself and the scattered ashes (wipes tears manually).

Let's take a look at Flame's implementation. We'll analyze it step by step.

 private static   float CHANGE_FACTOR = 20; 
 
 private Paint mPaint; 
 
 private Path mPath; 
 
 //Lower left point coordinates 
 
 private int mCurX; 
 
 private int mCurY; 
 
 //flame width 
 
 private int mWidth; 
 
 //Flame height 
 
 private int mHeight; 
 
 //Record the initial height 
 
 private int mPreHeight; 
 
 //Record the initial width 
 
 private int mPreWidth; 
 
 //Change parameters of the Bezier curve control point at the top of the flame 
 
 private int mTopXFactor; 
 
 private int mTopYFactor; 
 
 //Used to realize the jitter of flame 
 
 private Random mRandom; 
 
 //Aura radius 
 
 private int mHaloRadius; 
 
 //Burning 
 
 private boolean mIsFiring; 
 
 //Whether to start and stop the animation 
 
   private boolean mIsStopAnim = false ; 
 
   private boolean mFlagStop = false ; 
 
   private LinearGradient mLinearGradient; 
 
   private RadialGradient mRadialGradient; 
 
   private ValueAnimator mFlameAnimator; 
 
   private ValueAnimator mHaloAnimator;

These are the parameters. The main thing is our animation implementation process, that is, our attribute animation ValueAnimator. There are two rendering classes here. I don’t know if you have used them. LinearGradient and RadialGradient. If you don’t know them, you can directly click on my blog to learn about them. LinearGradient draws flames, and RadialGradient draws divergent light.

I will not write the initialization process, you can look at this code. The main thing is how the small flame is drawn.

 mPaint.setStyle(Paint.Style.FILL); 
 
   mPaint.setShader(mLinearGradient); 
 
 mPath.reset(); 
 
   mPath.moveTo(mCurX, mCurY); 
 
   mPath.quadTo(mCurX + mWidth / 2, 
 
           mCurY + mHeight / 3, 
 
           mCurX + mWidth, mCurY); 
 
   mPath.quadTo(mCurX + mWidth / 2 + ((1 - mRandom.nextFloat()) * CHANGE_FACTOR) + mTopXFactor, 
 
           mCurY - 2 * mHeight + mTopYFactor, 
 
 mCurX, mCurY); 
 
   canvas.drawPath(mPath, mPaint);

This is the drawing of flame. You can see that the quadratic Bezier curve is used here. Students who are not familiar with Bezier curves can also click this wave loading animation (Bezier curve) for a brief introduction. It was used in a water wave view. The drawing here is based on the rectangle in the previous picture. Let's take a look at this picture again (of course, it is an enhanced version of hiahia).

Then why is mRandom.nextFloat()) * CHANGE_FACTOR added to the x coordinate above? Think about it, the flame will swing left and right, so a random number is used to control the left and right swing.

 mFlameAnimator = ValueAnimator.ofFloat(0, 4).setDuration(4000); 
 
   mFlameAnimator.setRepeatCount(ValueAnimator.INFINITE); 
 
   mFlameAnimator.addUpdateListener( 
 
                  new ValueAnimator.AnimatorUpdateListener() { 
 
 @Override 
 
 public void onAnimationUpdate(ValueAnimator animation) { 
 
 float zeroToOne = ( float ) animation.getAnimatedValue(); 
 
           if (zeroToOne >= 1.0f && zeroToOne <= 1.2f) { 
 
 //The flame is burning 
 
               zeroToOne = 1.0f - 5 * (zeroToOne - 1.0f); //1-0 
 
               mHeight = ( int ) (mPreHeight * (1 - zeroToOne)); 
 
               mIsFiring = true ; 
 
           } else if (zeroToOne >= 3.5f) { 
 
               if (mFlagStop) { 
 
                   mFlameAnimator.cancel(); 
 
 return ; 
 
 } 
 
 //The flame is blown out 
 
               zeroToOne = 2 * (zeroToOne - 3.5f);//0-2 
 
               mTopXFactor = ( int ) (-20 * zeroToOne); 
 
               mTopYFactor = ( int ) (160 * zeroToOne); 
 
 / mWidth = ( int ) (mPreWidth * (1 -zeroToOne)); 
 
               mIsFiring = false ; 
 
 } 
 
 } 
 
 });

In 4 seconds, the flame has a series of activities. It moves up from the bottom with the wick, constantly changing the position of the flame. It is divided into two parts: the flame is lit and the flame is extinguished. From the code, we can see that when the flame is lit, mHeight slowly increases, and then there is a rising process. The other is when the flame is blown out. Because the height of the flame must remain the same when it is blown out, there is no need to change it. Instead, the two factors mTopXFactor and mTopYFactor are used to control the position of the flame. Well, now that the flame is there, the candle is burned to ashes and the tears are dry, and the light of life should also appear.

Drawing and animating the aperture is relatively simple

 mPaint.setStyle(Paint.Style.STROKE); 
 
           mPaint.setStrokeWidth(5); 
 
           mPaint.setShader(mRadialGradient); 
 
           canvas.drawCircle(mCurX + mWidth / 2, 
 
                        mCurY - mHeight / 2, mHaloRadius, mPaint); 
 
           canvas.drawCircle(mCurX + mWidth / 2, 
 
                        mCurY - mHeight / 2, mHaloRadius + 5, mPaint); 
 
           canvas.drawCircle(mCurX + mWidth / 2, 
 
                        mCurY - mHeight / 2, mHaloRadius - 5, mPaint);

Only one parameter is changed here, mHaloRadius, which is the radius of the aperture. But don't forget that other parameters are also changing at the same time, but they are placed in mFlameAnimator.

Well, that’s the end of the introduction to Flame. There is still a long way to go. I have written so much but it is not finished yet. It reminds me of something an ancient person said, but it is not me.

I'm dying of exhaustion before I die of old age

• FireCandle

This name is a bit strange, FireCandle, awesome! ICandle has been introduced before, now let's take a look at its implementation class, FireCandle.

As usual, I won't talk about initialization, let's look at the variables that should be there.

 private Paint mPaint; //Center X coordinate
 private int mCenterX; //Record initial width
 private int mPreWidth; //Record initial height
 private int mPreHeight; //Candle wick rotation angle
 private int mCandlewickDegrees = 0; private Flame mFlame; private boolean mIsFire = false ; private boolean mIsStateOnStart = false ; private boolean mIsStateOnEnd = false ; private boolean mFlagStop = false ; private ValueAnimator mCandlesAnimator;

The naming is quite standard, and you should know what it does at a glance.

Let's focus on the coordination between drawing and attribute animation. I won't look at the drawing (slap in the face at the speed of light). Let's look at the animation.

 mCandlesAnimator = ValueAnimator.ofFloat(0, 4).setDuration(4000); 
 
 mCandlesAnimator.addUpdateListener( 
 
                  new ValueAnimator.AnimatorUpdateListener() { 
 
 @Override 
 
 public void onAnimationUpdate(ValueAnimator animation) { 
 
 float zeroToOne = ( float ) animation.getAnimatedValue(); 
 
         if (zeroToOne <= 1.0f) { 
 
 //Candle wick pulls down 
 
 mIsFire = true ; 
 
             mCandleWidth = mPreWidth + ( int ) (zeroToOne * 40); 
 
             mCandleHeight = mPreHeight - ( int ) (zeroToOne * 30); 
 
             mCandlewickDegrees = ( int ) (-60 + (180 + 60) * zeroToOne); 
 
             refreshEyePosition(); 
 
         } else if (zeroToOne <= 2.0f) { 
 
             zeroToOne = zeroToOne - 1.0f; 
 
 //Candle wick swings upward 
 
             if (zeroToOne <= 0.2f) { 
 
                 zeroToOne = 1.0f - 5 * zeroToOne; 
 
                 mIsFire = false ; 
 
                 mCandleWidth = mPreWidth + ( int ) (zeroToOne * 40); 
 
                 mCandleHeight = mPreHeight - ( int ) (zeroToOne * 30); 
 
                 mCandlewickDegrees = ( int ) (180 * zeroToOne); 
 
 } else { 
 
                 if (mFlameStateListener != null && !mIsStateOnStart) { 
 
                     mFlameStateListener.flameStart(); 
 
                     mIsStateOnStart = true ; 
 
 } 
 
                 mCandleWidth = mPreWidth; 
 
                 mCandleHeight = mPreHeight; 
 
                 mCandlewickDegrees = 0; 
 
                 if (mFlagStop) { 
 
                     mCandlesAnimator.cancel(); 
 
 } 
 
 } 
 
             refreshEyePosition(); 
 
         } else if (zeroToOne >= 3.5f) { 
 
 //The candle wick is blown crooked 
 
             zeroToOne = 2 * (zeroToOne - 3.5f);//0-1 
 
             mCandlewickDegrees = ( int ) (-60 * zeroToOne); 
 
             if (mFlameStateListener != null && !mIsStateOnEnd) { 
 
                 mFlameStateListener.flameEnd(); 
 
                 mIsStateOnEnd = true ; 
 
 } 
 
 } 
 
 } 
 
 });

This process is a bit long, but it is not complicated at all. First, let's look at the little candle in the animation. At the beginning, it squatted with a fat red face, so mCandleWidth became larger and mCandleHeight became smaller. The wick at the back rotated at a large angle as it squatted. You can see how the wick rotates. Just change the coordinate system and it will work.

canvas.rotate(mCandlewickDegrees, mCenterX, mCurY - mCandleHeight); This method. The process of swinging up is the same, so I won't go into details. refreshEyePosition(); This method is used to change the eye position. It is used in two places, so it is slightly independent. Pay attention to the variable mIsFire. When there is no flame, do other drawing, such as red eyes, etc. Okay, okay, this is the end of the introduction to the small candle.

SecCandle

Big candles, handsome candles are the centerpieces. The actual drawing process is similar to that of small candles, so I won’t explain it here.

Drawing View and Controller Together

AnimControler

The function of this class is very simple. It draws the floor and assigns the calculated height and width to the two candles, and then controls the two candles to start animation separately.

 mFirCandle = new FirCandle(mRelativeX + mWidth / 6, mRelativeY + mHeight); 
 
 mFirCandle.initCandle(mFirCandleWidth, mFirCandleHeight); 
 
 mFirCandle.initAnim(); 
 
 mSecCandle = new SecCandle(mRelativeX + mWidth / 2, mRelativeY + mHeight); 
 
 mSecCandle.initCandle(mSecCandleWidth, mSecCandleHeight - 80); 
 
 mSecCandle.initAnim();

******, is our View

• CandlesAnimView

 //16ms refresh Canvas 
 
     mInvalidateAnimator = ValueAnimator.ofInt(0, 1).setDuration(16); 
 
     mInvalidateAnimator.setRepeatCount(ValueAnimator.INFINITE); 
 
     mInvalidateAnimator.addListener(new AnimatorListenerAdapter() { 
 
 @Override 
 
 public void onAnimationRepeat(Animator animation) { 
 
 invalidate(); 
 
 } 
 
 }); 
 
     mInvalidateAnimator.start();

The task of this attribute animation is to quickly refresh the interface so that the Candle animation can be displayed in time.

 @Override
 protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = measureDimension(WIDTH_DEFAULT * mDensity,
                               widthMeasureSpec); int height = measureDimension(HEIGHT_DEFAULT *mDensity,
                               heightMeasureSpec);
    setMeasuredDimension(width, height);
 } public   int measureDimension( int defaultSize, int measureSpec) { int result; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) {
 result = specSize;
 } else {
        result = defaultSize; if (specMode == MeasureSpec.AT_MOST) {
            result = Math. min (result, specSize);
 }
 } return result;
 } @Override
 protected void onDraw(Canvas canvas) { if (!mIsInit) {
 initConfig();
 mIsInit = true ;
 }
    mAnimControler.drawMyView(canvas);
 }

You can see that *** called our controller in the view and passed the cavas.

***Tip: Have you noticed that the duration of each animation is the same?

three,***

Well, I have said so much about a simple view customization. This is my first time writing on Jianshu, I hope you can support me.

I hope you can put forward any suggestions and opinions.