一、简介

最近开始写一些文章记录一下以前的一些自己写的小项目或者是定义View积累，积灰的东西还是要多翻出来整理整理看看的，在我的csdn上也有。这个只完成了一部分燃起熄灭的动画，没有为何燃起火焰的动画，希望有兴趣的同学也可以接着完成并分享，话不多说，我们来看这两根萌萌的小蜡烛。

小蜡烛憋足气把火焰燃起，一下被旁边的哥们吹灭了 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() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float zeroToOne = (float) animation.getAnimatedValue();if (zeroToOne >= 1.0f && zeroToOne <= 1.2f) {//火焰燃起zeroToOne = 1.0f - 5 * (zeroToOne - 1.0f);//1-0mHeight = (int) (mPreHeight * (1 - zeroToOne));mIsFiring = true;} else if (zeroToOne >= 3.5f) {if (mFlagStop) {mFlameAnimator.cancel();return;}//火焰被吹灭zeroToOne = 2 * (zeroToOne - 3.5f);//0-2mTopXFactor = (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);

        mHaloAnimator = ValueAnimator.ofFloat(0, 1).setDuration(500);mHaloAnimator.setRepeatCount(ValueAnimator.INFINITE);mHaloAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float zeroToOne = (float) animation.getAnimatedValue();if (mIsFiring) {mHaloRadius = (int) (70 + zeroToOne % 1.0f * 20);}}});

这里改变的只有一个参数，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() {@Overridepublic 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-1mCandlewickDegrees = (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刷新CanvasmInvalidateAnimator = ValueAnimator.ofInt(0, 1).setDuration(16);mInvalidateAnimator.setRepeatCount(ValueAnimator.INFINITE);mInvalidateAnimator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationRepeat(Animator animation) {invalidate();}});mInvalidateAnimator.start();

这个属性动画履行的任务就是快速的刷新界面，是Candle的动画能够及时显示。

    @Overrideprotected 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;}@Overrideprotected void onDraw(Canvas canvas) {if (!mIsInit) {initConfig();mIsInit = true;}mAnimControler.drawMyView(canvas);}

可以看到最后在view里面调用了我们的控制器，把cavas传过去了。
最后的tip：大家有没有发现每个动画的duration都是一样的。

三、最后

好了至此，本来一个简单的view自定义被我说了这么多。初次在简书上写，望大家多支持支持。
希望大家有什么建议和意见都可以提出。望斧正。
GITHUB源码下载
欢迎大家来我的博客逛逛,之前也没什么时间写博客文章的，最近开始，大家多多支持！！！

原文地址：http://blog.csdn.net/xiong_1203/article/details/53470230?ref=myread

android－－ Android动画之萌萌哒蜡烛吹蜡烛动画相关推荐

com.sec.android.ofviewer是什么,Android动画之萌萌哒蜡烛吹蜡烛动画
原标题:Android动画之萌萌哒蜡烛吹蜡烛动画快,点击蓝色"字体"关注这个公众号,一起涨姿势一.简介最近开始写一些文章记录一下以前的一些自己写的小项目或者是定义View积累 ...
Android动画之萌萌哒蜡烛吹蜡烛动画
一.简介最近开始写一些文章记录一下以前的一些自己写的小项目或者是定义View积累,积灰的东西还是要多翻出来整理整理看看的,在我的csdn上也有.这个只完成了一部分燃起熄灭的动画,没有为何燃起火焰的动 ...
Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
android ui动画效果怎么做,AndroidUI 布局动画-为列表添加布局动画效果
新建一个Android project ,使MainActivity 继承自 ListActivity: public class MainActivity extends ListActivity ...
android 页面翻转进场动画_Android实现翻转及延迟动画效果
最近在学习安卓一些动画效果制作.做了点翻转和延迟入场动画的效果,并做了些封装.动画基于属性动画实现的,所以仅能在api11以后运行,不过现在应该也没有11以前的机器了吧...废话不多说,先上效果再贴代 ...
Android为TV端助力最详细的动画大全，包括如何在代码和在XML中使用
一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...
flash动画制作成品_Flash制作点燃蛋糕蜡烛的互动动画
关于蜡烛已经讲了火焰的制作方法,这里再讲一下如何制作点燃蛋糕蜡烛的互动小动画. Flash如何制作蜡烛火焰动画mp.weixin.qq.com Flash如何制作打火机点蜡烛的效果(AS3)mp. ...
【Android Developers Training】 68. 序言：添加动画
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
Android中实现一个简单的逐帧动画(附代码下载)
场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿 ...

android－－ Android动画之萌萌哒蜡烛吹蜡烛动画