Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "Android how to achieve candle blowing animation". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this "Android how to achieve candle blowing animation" article can help you solve the problem.

I. brief introduction

Let's take a look at these two cute little candles.

The small candle held its breath and lit the flame and was blown out by the buddy next to it. It still looked very cute. Looking at the picture, you should be able to figure out how to achieve it, custom View! By the way, but how to do this process well? let's take a look at it along with the steps. The code is a little too much. Watch it patiently. Interested students can clone down from my GITHUB and look at the code.

Second, process realization

Drawing and animation of candles

In line with the idea of object-oriented, it is obvious that here are two candles! In that case, let's define a candle class that has the basic properties of a candle.

Public abstract class ICandle {/ / bottom left coordinates of candle bottom protected int mCurX; protected int mCurY; / / candle width and height protected int mCandleWidth; protected int mCandleHeight; / / candle left eye coordinates protected Point mEyeLPoint; / / candle right eye coordinates protected Point mEyeRPoint; / / candle eye radius protected int mEyeRadius; / / eye spacing distance protected int mEyeDevide / / body color protected int mCandleColor; / / whether to stop animation protected boolean mIsAnimStoping = false; / / candle wick coordinates protected Point mCandlewickPoint; public void initAnim () {} public void stopAnim () {} public void drawSelf (Canvas canvas) {}}

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

Now is the time to take a look at the inner structure of the little candle, hiahiahiahia!

No, there is a flame with the candle. Let's take a look at the flame first. The little candle will burn itself later. + 10086s

Flame

Let's first take a look at our Fulham.

There seems to be nothing wrong with it, first of all, the inner area, that is, Flame, and outside, Mr. Flame burns his own light of humanity and scattered ashes (manually wiping away tears).

Take a look at the implementation of Flame. We analyze it step by step.

Private static float CHANGE_FACTOR = 20; private Paint mPaint; private Path mPath; / / bottom left point coordinates private int mCurX; private int mCurY; / / Flame width private int mWidth; / / Flame height private int mHeight; / / record initial height private int mPreHeight; / / record initial width private int mPreWidth / / Bezier curve control point change parameter private int mTopXFactor; private int mTopYFactor; / / used to realize flame jitter private Random mRandom; / / halo radius private int mHaloRadius; / / burning private boolean mIsFiring; / / whether to start and stop animation private boolean mIsStopAnim = false; private boolean mFlagStop = false; private LinearGradient mLinearGradient; private RadialGradient mRadialGradient; private ValueAnimator mFlameAnimator Private ValueAnimator mHaloAnimator

Parameters are these, mainly our animation implementation process, that is, our attribute animation ValueAnimator here there are two rendering classes do not know if you have used, LinearGradient and RadialGradient do not understand the students can directly click my blog to understand. LinearGradient draws the flame, RadialGradient draws in addition to the divergent light.

I won't write about the initialization process. Let's take a look at this code. The main thing is how is the small flame drawn, show the code?

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 flame. We can see that the drawing of quadratic Bezier curve is used here. Students who are not clear about Bezier curve can also click on this wave Loading animation (Bezier curve) to have a simple introduction, which was used in the view of a water wave at that time. The drawing here is based on the rectangle in the previous diagram, and let's take a look at this diagram (enhanced hiahia, of course).

Then why do you add mRandom.nextFloat ()) * CHANGE_FACTOR to the x coordinates above? If you think about it, doesn't the flame sway from side to side, using a random 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 = 3.5F) {if (mFlagStop) {mFlameAnimator.cancel (); return;} / / Flame 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 carried out a series of activities, moving up with the wick from below, constantly changing the position of the flame, divided into two parts, the flame lit and the flame extinguished. You can see from the code that when the flame is lit, the mHeight slowly increases, and then there is a hot process of rising, and the other is when the flame is blown out, because the height of the flame must keep the previous value when it is blown out. So there is no need to change, but two factors, mTopXFactor and mTopYFactor, are used to control the position of the flame. Well, now that there is a flame, the wax torch turns to ash and tears begin to dry, and it's time for the light of life to come out.

The drawing and animation of 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 has been changed here, mHaloRadius, which is the radius of the aperture. But don't forget that other parameters are also changing, only in mFlameAnimator.

All right, the introduction of Flame is over, and there is a long way to go. After so much writing, it reminds me of an ancient man who said, "it's not me."

Before you die of old age, you will die of exhaustion

FireCandle

The name is a little strange, Fire Candle, awesome Brother Word. ICandle has been introduced earlier, and now let's take a look at his implementation class, candle brothers FireCandle.

Initialization will not be said as usual, let's take a look at the variables that should exist.

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 is at a glance.

Let's mainly look at the cooperation of drawing and attribute animation, but not the drawing (hitting 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)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.