Android動畫之萌萌噠蠟燭吹蠟燭動畫
一、簡介
最近開始寫一些文章記錄一下以前的一些自己寫的小項目或者是定義View積累，積灰的東西還是要多翻出來整理整理看看的。這個只完成了一部分燃起熄滅的動畫，沒有為何燃起火焰的動畫，希望有興趣的同學也可以接著完成并分享，話不多說，我們來看這兩根萌萌的小蠟燭。
小蠟燭憋足氣把火焰燃起，一下被旁邊的哥們吹滅了 0^0 ,看起來還是萌氣十足的啊。看著圖大家應該能想到應該怎么實現了吧，自定義View!對了，但是具體要怎么把這個過程做好呢，跟著腳步一起來看一看吧。代碼稍微有點多，大家耐心觀看，有興趣的同學可以從我的GITHUB上clone下來，對著代碼看。
二、過程實現
蠟燭的繪制和動畫
- 本著面向對象的思想，很明顯這里就是兩個蠟燭嘛!既然是這樣那我們就定義一個蠟燭類具有蠟燭的基本屬性。
public abstract class ICandle {
//蠟燭底部左下坐標
protected int mCurX;
protected int mCurY;
//蠟燭寬高
protected int mCandleWidth;
protected int mCandleHeight;
//蠟燭左眼坐標
protected Point mEyeLPoint;
//蠟燭右眼坐標
protected Point mEyeRPoint;
//蠟燭眼睛半徑
protected int mEyeRadius;
//眼睛間隔距離
protected int mEyeDevide;
//身體顏色
protected int mCandleColor;
//是否停止動畫中
protected boolean mIsAnimStoping = false;
//蠟燭芯坐標
protected Point mCandlewickPoint;
public void initAnim(){
}
public void stopAnim(){
}
public void drawSelf(Canvas canvas){
}
}
對應著這蠟燭還有代碼，那就一目了然了。可能需要解釋的應該就是下面的幾個方法了public void initAnim()， stopAnim()初始化開始和結束動畫需要的數據，小蠟燭將會實現這個方法，drawSelf(Canvas canvas)把畫布傳進來然后蠟燭自己繪制自己。
現在就是讓我們來看一看小蠟燭身體內部構造的時候了，hiahiahiahia!
不對，和蠟燭生死相隨的還有火焰呢!先來看看火焰吧，等下小蠟燭還要燃燒自己呢。+10086s
Flame
- 一樣先來一睹我們的富勒姆真容
好像也沒什么毛病，首先是里面的區域，就是Flame啦，外面的呢，就是Flame先生燃燒自己散發的人性之光和飄散的骨灰(手動抹眼淚)。
來看一下Flame的實現吧。我們一步步分析。
private static float CHANGE_FACTOR = 20;
private Paint mPaint;
private Path mPath;
//左下點坐標
private int mCurX;
private int mCurY;
//火焰寬度
private int mWidth;
//火焰高度
private int mHeight;
//記錄初始高度
private int mPreHeight;
//記錄初始寬度
private int mPreWidth;
//火焰頂部貝塞爾曲線控制點變化參數
private int mTopXFactor;
private int mTopYFactor;
//用于實現火焰的抖動
private Random mRandom;
//光環半徑
private int mHaloRadius;
//正在燃燒
private boolean mIsFiring;
//是否啟動停止動畫
private boolean mIsStopAnim = false;
private boolean mFlagStop = false;
private LinearGradient mLinearGradient;
private RadialGradient mRadialGradient;
private ValueAnimator mFlameAnimator;
private ValueAnimator mHaloAnimator;
參數就是這些了，主要是我們的動畫實現過程，也就是我們的屬性動畫ValueAnimator這里還有兩個渲染類不知道大家用過沒有，LinearGradient和RadialGradient不了解的同學可以直接點我的博文了解一下。LinearGradient繪制出了火焰，RadialGradient繪制除了發散的光芒。
初始化的過程我就不寫了，大家對這代碼看吧。那主要的就是小火焰的是怎么繪制出來的呢 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的繪制，可以看到這里用到了二次貝塞爾曲線的繪制，不太清楚貝塞爾曲線的同學也可以點這波浪Loading動畫(貝塞爾曲線)有簡單的介紹，當時是用在一個水波的view里面。這里的繪制是以前面那個圖里面的矩形為參照，我們再來看一下這個圖(當然是加強版hiahia)。
那為什么上面的x坐標還加了mRandom.nextFloat()) * CHANGE_FACTOR呢?你想啊，火焰不是會左右晃動嗎，利用一個隨機來控制左右擺動咯。
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秒的時間內，火焰進行了一系列活動，從下面隨著燈芯移上來，不斷的改變火焰的位置，分為了兩部分，火焰燃起和火焰熄滅，從代碼中可以看到，火焰燃起時mHeight慢慢變大，然后就是有了升起的過程辣，另外一個就是火焰被吹滅的時候，因為吹滅的時候火焰的高度肯定是保持之前的值，所以不需要改變，而是用了mTopXFactor和mTopYFactor這個兩個因子來控制火焰的位置。好了，既然火焰有了，蠟炬成灰淚始干啊，生命之光也該出場了。
光圈的繪制和動畫就相對簡單了
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);
這里改變的只有一個參數，mHaloRadius也就是光圈的半徑。但是不要忘了，其他參數同時也是在改變的呢，只不過是放在了mFlameAnimator里面。
好了介紹到這Flame的介紹完了，任重而道遠啊，寫了這么多卻還沒完結，讓我想到一某位古人說過，不是我。
還未老死，就先累死
- FireCandle
這名字有點奇怪，火燭，厲害了Word哥。前面已經介紹過ICandle了，現在來看一下他的實現類，蠟燭兩兄弟之FireCandle。
初始化照例也就不說了，來看該有的變量。
private Paint mPaint; //中心X坐標
private int mCenterX; //記錄初始寬
private int mPreWidth; //記錄初始高
private int mPreHeight; //蠟燭芯旋轉角
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;
命名還是挺規范的，應該一看就知道是干嘛的。
我們還是來主要看繪制和屬性動畫的配合，繪制就不看了(光速打臉)。來看動畫。
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;
}
}
}
});
這個就過程就有點多了，但是其實一點都不復雜，，首先我們看動畫里面的小蠟燭,一開始，他來了一個變胖紅臉深蹲，所以呢mCandleWidth是變大的，mCandleHeight是變小的，后面那個燈芯隨著深蹲來了一個大角度旋轉，燈芯的如何旋轉大家也看到了，改變坐標系然后就可以了。用到了
canvas.rotate(mCandlewickDegrees, mCenterX, mCurY - mCandleHeight);這個方法。上擺過程也是一樣的，就不多說了。refreshEyePosition();這個方法是改變眼睛位置的，兩個地方都用到了所以稍微獨立出來了。注意mIsFire這個變量，沒有火焰的時候就做其他繪制，比如說紅眼睛等等。好了好了，介紹到這，小蠟燭的部分就結束了。
SecCandle
大蠟燭，帥蠟燭鎮樓，實際的繪制和小蠟燭的就差不多了，這里就不解釋了。
共同繪制View和控制器
AnimControler
這個類的功能很簡單，繪制地板部分還有就是把計算后傳過來的高度寬度賦給兩支蠟燭，然后控制兩支蠟燭各自開始動畫。
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();
這個屬性動畫履行的任務就是快速的刷新界面，是Candle的動畫能夠及時顯示。
@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里面調用了我們的控制器，把cavas傳過去了。
最后的tip：大家有沒有發現每個動畫的duration都是一樣的。
三、最后
好了至此，本來一個簡單的view自定義被我說了這么多。初次在簡書上寫，望大家多支持支持。
希望大家有什么建議和意見都可以提出。望斧正。
來自：http://mobile.51cto.com/android-530023.htm