Android怎么實(shí)現(xiàn)吹蠟燭動(dòng)畫

這篇文章主要介紹“Android怎么實(shí)現(xiàn)吹蠟燭動(dòng)畫”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Android怎么實(shí)現(xiàn)吹蠟燭動(dòng)畫”文章能幫助大家解決問題。

一、簡(jiǎn)介

我們來看這兩根萌萌的小蠟燭。

小蠟燭憋足氣把火焰燃起，一下被旁邊的哥們吹滅了 0^0  ,看起來還是萌氣十足的啊?？粗鴪D大家應(yīng)該能想到應(yīng)該怎么實(shí)現(xiàn)了吧，自定義View!對(duì)了，但是具體要怎么把這個(gè)過程做好呢，跟著腳步一起來看一看吧。代碼稍微有點(diǎn)多，大家耐心觀看，有興趣的同學(xué)可以從我的GITHUB上clone下來，對(duì)著代碼看。

二、過程實(shí)現(xiàn)

蠟燭的繪制和動(dòng)畫

• 本著面向?qū)ο蟮乃枷耄苊黠@這里就是兩個(gè)蠟燭嘛!既然是這樣那我們就定義一個(gè)蠟燭類具有蠟燭的基本屬性。 

public abstract class ICandle {       //蠟燭底部左下坐標(biāo)      protected int mCurX;      protected int mCurY;      //蠟燭寬高      protected int mCandleWidth;      protected int mCandleHeight;      //蠟燭左眼坐標(biāo)      protected Point mEyeLPoint;      //蠟燭右眼坐標(biāo)      protected Point mEyeRPoint;      //蠟燭眼睛半徑      protected int mEyeRadius;      //眼睛間隔距離      protected int mEyeDevide;      //身體顏色      protected int mCandleColor;      //是否停止動(dòng)畫中      protected boolean mIsAnimStoping = false;      //蠟燭芯坐標(biāo)      protected Point mCandlewickPoint;      public void initAnim(){      }      public void stopAnim(){      }      public void drawSelf(Canvas canvas){      }  }

對(duì)應(yīng)著這蠟燭還有代碼，那就一目了然了。可能需要解釋的應(yīng)該就是下面的幾個(gè)方法了public void initAnim()，  stopAnim()初始化開始和結(jié)束動(dòng)畫需要的數(shù)據(jù)，小蠟燭將會(huì)實(shí)現(xiàn)這個(gè)方法，drawSelf(Canvas  canvas)把畫布傳進(jìn)來然后蠟燭自己繪制自己。

現(xiàn)在就是讓我們來看一看小蠟燭身體內(nèi)部構(gòu)造的時(shí)候了，hiahiahiahia!

不對(duì)，和蠟燭生死相隨的還有火焰呢!先來看看火焰吧，等下小蠟燭還要燃燒自己呢。+10086s

Flame

• 一樣先來一睹我們的富勒姆真容 

好像也沒什么毛病，首先是里面的區(qū)域，就是Flame啦，外面的呢，就是Flame先生燃燒自己散發(fā)的人性之光和飄散的骨灰(手動(dòng)抹眼淚)。

來看一下Flame的實(shí)現(xiàn)吧。我們一步步分析。

private static float CHANGE_FACTOR = 20;     private Paint mPaint;     private Path mPath;     //左下點(diǎn)坐標(biāo)     private int mCurX;     private int mCurY;     //火焰寬度     private int mWidth;     //火焰高度     private int mHeight;     //記錄初始高度     private int mPreHeight;     //記錄初始寬度     private int mPreWidth;     //火焰頂部貝塞爾曲線控制點(diǎn)變化參數(shù)     private int mTopXFactor;     private int mTopYFactor;     //用于實(shí)現(xiàn)火焰的抖動(dòng)     private Random mRandom;     //光環(huán)半徑     private int mHaloRadius;     //正在燃燒     private boolean mIsFiring;     //是否啟動(dòng)停止動(dòng)畫     private boolean mIsStopAnim = false;     private boolean mFlagStop = false;     private LinearGradient mLinearGradient;     private RadialGradient mRadialGradient;     private ValueAnimator mFlameAnimator;     private ValueAnimator mHaloAnimator;

參數(shù)就是這些了，主要是我們的動(dòng)畫實(shí)現(xiàn)過程，也就是我們的屬性動(dòng)畫ValueAnimator這里還有兩個(gè)渲染類不知道大家用過沒有，LinearGradient和RadialGradient不了解的同學(xué)可以直接點(diǎn)我的博文了解一下。LinearGradient繪制出了火焰，RadialGradient繪制除了發(fā)散的光芒。

初始化的過程我就不寫了，大家對(duì)這代碼看吧。那主要的就是小火焰的是怎么繪制出來的呢 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);

這就是火焰flame的繪制，可以看到這里用到了二次貝塞爾曲線的繪制，不太清楚貝塞爾曲線的同學(xué)也可以點(diǎn)這波浪Loading動(dòng)畫(貝塞爾曲線)有簡(jiǎn)單的介紹，當(dāng)時(shí)是用在一個(gè)水波的view里面。這里的繪制是以前面那個(gè)圖里面的矩形為參照，我們?cè)賮砜匆幌逻@個(gè)圖(當(dāng)然是加強(qiáng)版hiahia)。

那為什么上面的x坐標(biāo)還加了mRandom.nextFloat()) *  CHANGE_FACTOR呢?你想啊，火焰不是會(huì)左右晃動(dòng)嗎，利用一個(gè)隨機(jī)來控制左右擺動(dòng)咯。

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) {                 //火焰燃起                 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;                 }                 //火焰被吹滅                 zeroToOne = 2 * (zeroToOne - 3.5f);//0-2                 mTopXFactor = (int) (-20 * zeroToOne);                 mTopYFactor = (int) (160 * zeroToOne);  /                    mWidth = (int) (mPreWidth * (1 -zeroToOne));                 mIsFiring = false;             }         }     });

在4秒的時(shí)間內(nèi)，火焰進(jìn)行了一系列活動(dòng)，從下面隨著燈芯移上來，不斷的改變火焰的位置，分為了兩部分，火焰燃起和火焰熄滅，從代碼中可以看到，火焰燃起時(shí)mHeight慢慢變大，然后就是有了升起的過程辣，另外一個(gè)就是火焰被吹滅的時(shí)候，因?yàn)榇禍绲臅r(shí)候火焰的高度肯定是保持之前的值，所以不需要改變，而是用了mTopXFactor和mTopYFactor這個(gè)兩個(gè)因子來控制火焰的位置。好了，既然火焰有了，蠟炬成灰淚始干啊，生命之光也該出場(chǎng)了。

光圈的繪制和動(dòng)畫就相對(duì)簡(jiǎn)單了

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);

這里改變的只有一個(gè)參數(shù)，mHaloRadius也就是光圈的半徑。但是不要忘了，其他參數(shù)同時(shí)也是在改變的呢，只不過是放在了mFlameAnimator里面。

好了介紹到這Flame的介紹完了，任重而道遠(yuǎn)啊，寫了這么多卻還沒完結(jié)，讓我想到一某位古人說過，不是我。

還未老死，就先累死

• FireCandle

這名字有點(diǎn)奇怪，火燭，厲害了Word哥。前面已經(jīng)介紹過ICandle了，現(xiàn)在來看一下他的實(shí)現(xiàn)類，蠟燭兩兄弟之FireCandle。

初始化照例也就不說了，來看該有的變量。

private Paint mPaint;  //中心X坐標(biāo)  private int mCenterX;  //記錄初始寬  private int mPreWidth;  //記錄初始高  private int mPreHeight;  //蠟燭芯旋轉(zhuǎn)角  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;

命名還是挺規(guī)范的，應(yīng)該一看就知道是干嘛的。

我們還是來主要看繪制和屬性動(dòng)畫的配合，繪制就不看了(光速打臉)。來看動(dòng)畫。

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) {               //蠟燭芯蓄力下拉               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;               //蠟燭芯上擺               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) {               //蠟燭芯被吹歪               zeroToOne = 2 * (zeroToOne - 3.5f);//0-1               mCandlewickDegrees = (int) (-60 * zeroToOne);               if (mFlameStateListener != null && !mIsStateOnEnd) {                   mFlameStateListener.flameEnd();                   mIsStateOnEnd = true;               }           }       }   });

這個(gè)就過程就有點(diǎn)多了，但是其實(shí)一點(diǎn)都不復(fù)雜，，首先我們看動(dòng)畫里面的小蠟燭,一開始，他來了一個(gè)變胖紅臉深蹲，所以呢mCandleWidth是變大的，mCandleHeight是變小的，后面那個(gè)燈芯隨著深蹲來了一個(gè)大角度旋轉(zhuǎn)，燈芯的如何旋轉(zhuǎn)大家也看到了，改變坐標(biāo)系然后就可以了。用到了

canvas.rotate(mCandlewickDegrees, mCenterX, mCurY -  mCandleHeight);這個(gè)方法。上擺過程也是一樣的，就不多說了。refreshEyePosition();這個(gè)方法是改變眼睛位置的，兩個(gè)地方都用到了所以稍微獨(dú)立出來了。注意mIsFire這個(gè)變量，沒有火焰的時(shí)候就做其他繪制，比如說紅眼睛等等。好了好了，介紹到這，小蠟燭的部分就結(jié)束了。

SecCandle

大蠟燭，帥蠟燭鎮(zhèn)樓，實(shí)際的繪制和小蠟燭的就差不多了，這里就不解釋了。

共同繪制View和控制器

AnimControler

這個(gè)類的功能很簡(jiǎn)單，繪制地板部分還有就是把計(jì)算后傳過來的高度寬度賦給兩支蠟燭，然后控制兩支蠟燭各自開始動(dòng)畫。

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();

***的***，就是我們的View了

• CandlesAnimView

//16ms刷新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();

這個(gè)屬性動(dòng)畫履行的任務(wù)就是快速的刷新界面，是Candle的動(dòng)畫能夠及時(shí)顯示。

@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); }

可以看到***在view里面調(diào)用了我們的控制器，把cavas傳過去了。

***的tip：大家有沒有發(fā)現(xiàn)每個(gè)動(dòng)畫的duration都是一樣的。

關(guān)于“Android怎么實(shí)現(xiàn)吹蠟燭動(dòng)畫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。