Android动画之萌萌哒蜡烛吹蜡烛动画
二、过程实现
蜡烛的绘制和动画
本着面向对象的思想，很明显这里就是两个蜡烛嘛！既然是这样那我们就定义一个蜡烛类具有蜡烛的基本属性。
publicabstractclassICandle{
//蜡烛底部左下坐标
protectedintmCurX;
protectedintmCurY;
//蜡烛宽高
protectedintmCandleWidth;
protectedintmCandleHeight;
//蜡烛左眼坐标
protectedPointmEyeLPoint;
//蜡烛右眼坐标
protectedPointmEyeRPoint;
//蜡烛眼睛半径
protectedintmEyeRadius;
//眼睛间隔距离
protectedintmEyeDevide;
//身体颜色
protectedintmCandleColor;
//是否停止动画中
protectedbooleanmIsAnimStoping=false;
//蜡烛芯坐标
protectedPointmCandlewickPoint;
publicvoidinitAnim(){
}
publicvoidstopAnim(){
}
publicvoiddrawSelf(Canvascanvas){
}
}
对应着这蜡烛还有代码，那就一目了然了。可能需要解释的应该就是下面的几个方法了publicvoidinitAnim()，stopAnim()初始化开始和结束动画需要的数据，小蜡烛将会实现这个方法，drawSelf(Canvascanvas)把画布传进来然后蜡烛自己绘制自己。
现在就是让我们来看一看小蜡烛身体内部构造的时候了，hiahiahiahia！
不对，和蜡烛生死相随的还有火焰呢！先来看看火焰吧，等下小蜡烛还要燃烧自己呢。+10086s
+Flame
一样先来一睹我们的富勒姆真容
好像也没什么毛病，首先是里面的区域，就是Flame啦，外面的呢，就是Flame先生燃烧自己散发的人性之光和飘散的骨灰(手动抹眼泪)。
来看一下Flame的实现吧。我们一步步分析。
privatestaticfloatCHANGE_FACTOR=20;
privatePaintmPaint;
privatePathmPath;
//左下点坐标
privateintmCurX;
privateintmCurY;
//火焰宽度
privateintmWidth;
//火焰高度
privateintmHeight;
//记录初始高度
privateintmPreHeight;
//记录初始宽度
privateintmPreWidth;
//火焰顶部贝塞尔曲线控制点变化参数
privateintmTopXFactor;
privateintmTopYFactor;
//用于实现火焰的抖动
privateRandommRandom;
//光环半径
privateintmHaloRadius;
//正在燃烧
privatebooleanmIsFiring;
//是否启动停止动画
privatebooleanmIsStopAnim=false;
privatebooleanmFlagStop=false;
privateLinearGradientmLinearGradient;
privateRadialGradientmRadialGradient;
privateValueAnimatormFlameAnimator;
privateValueAnimatormHaloAnimator;
参数就是这些了，主要是我们的动画实现过程，也就是我们的属性动画ValueAnimator这里还有两个渲染类不知道大家用过没有，LinearGradient和RadialGradient不了解的同学可以看我之前的博文了解一下。LinearGradient绘制出了火焰，RadialGradient绘制除了发散的光芒。
初始化的过程我就不写了，大家对这代码看吧。那主要的就是小火焰的是怎么绘制出来的呢showthecode
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-2mHeight+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(
newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
floatzeroToOne=(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;
}elseif(zeroToOne>=3.5f){
if(mFlagStop){
mFlameAnimator.cancel();
return;
}
//火焰被吹灭
zeroToOne=2(zeroToOne-3.5f);//0-2
mTopXFactor=(int)(-20zeroToOne);
mTopYFactor=(int)(160zeroToOne);
//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(
newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
floatzeroToOne=(float)animation.getAnimatedValue();
if(mIsFiring){
mHaloRadius=(int)(70+zeroToOne%1.0f20);
}
}
});
这里改变的只有一个参数，mHaloRadius也就是光圈的半径。但是不要忘了，其他参数同时也是在改变的呢，只不过是放在了mFlameAnimator里面。
好了介绍到这Flame的介绍完了，任重而道远啊，写了这么多却还没完结，让我想到一某位古人说过，不是我。
还未老死，就先累死
FireCandle
这名字有点奇怪，火烛，厉害了Word哥。前面已经介绍过ICandle了，现在来看一下他的实现类，蜡烛两兄弟之FireCandle。
初始化照例也就不说了，来看该有的变量。
privatePaintmPaint;
//中心X坐标
privateintmCenterX;
//记录初始宽
privateintmPreWidth;
//记录初始高
privateintmPreHeight;
//蜡烛芯旋转角
privateintmCandlewickDegrees=0;
privateFlamemFlame;
privatebooleanmIsFire=false;
privatebooleanmIsStateOnStart=false;
privatebooleanmIsStateOnEnd=false;
privatebooleanmFlagStop=false;
privateValueAnimatormCandlesAnimator;
命名还是挺规范的，应该一看就知道是干嘛的。
我们还是来主要看绘制和属性动画的配合，绘制就不看了(光速打脸)。来看动画。
mCandlesAnimator=ValueAnimator.ofFloat(0,4).setDuration(4000);
mCandlesAnimator.addUpdateListener(
newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
floatzeroToOne=(float)animation.getAnimatedValue();
if(zeroToOne<=1.0f){
//蜡烛芯蓄力下拉
mIsFire=true;
mCandleWidth=mPreWidth+(int)(zeroToOne40);
mCandleHeight=mPreHeight-(int)(zeroToOne30);
mCandlewickDegrees=(int)(-60+(180+60)zeroToOne);
refreshEyePosition();
}elseif(zeroToOne<=2.0f){
zeroToOne=zeroToOne-1.0f;
//蜡烛芯上摆
if(zeroToOne<=0.2f){
zeroToOne=1.0f-5zeroToOne;
mIsFire=false;
mCandleWidth=mPreWidth+(int)(zeroToOne40);
mCandleHeight=mPreHeight-(int)(zeroToOne30);
mCandlewickDegrees=(int)(180zeroToOne);
}else{
if(mFlameStateListener!=null&&!mIsStateOnStart){
mFlameStateListener.flameStart();
mIsStateOnStart=true;
}
mCandleWidth=mPreWidth;
mCandleHeight=mPreHeight;
mCandlewickDegrees=0;
if(mFlagStop){
mCandlesAnimator.cancel();
}
}
refreshEyePosition();
}elseif(zeroToOne>=3.5f){
//蜡烛芯被吹歪
zeroToOne=2(zeroToOne-3.5f);//0-1
mCandlewickDegrees=(int)(-60zeroToOne);
if(mFlameStateListener!=null&&!mIsStateOnEnd){
mFlameStateListener.flameEnd();
mIsStateOnEnd=true;
}
}
}
});
这个就过程就有点多了，但是其实一点都不复杂，，首先我们看动画里面的小蜡烛,一开始，他来了一个变胖红脸深蹲，所以呢mCandleWidth是变大的，mCandleHeight是变小的，后面那个灯芯随着深蹲来了一个大角度旋转，灯芯的如何旋转大家也看到了，改变坐标系然后就可以了。用到了
canvas.rotate(mCandlewickDegrees,mCenterX,mCurY-mCandleHeight);这个方法。上摆过程也是一样的，就不多说了。refreshEyePosition();这个方法是改变眼睛位置的，两个地方都用到了所以稍微独立出来了。注意mIsFire这个变量，没有火焰的时候就做其他绘制，比如说红眼睛等等。好了好了，介绍到这，小蜡烛的部分就结束了。
+SecCandle
大蜡烛，帅蜡烛镇楼，实际的绘制和小蜡烛的就差不多了，这里就不解释了。
共同绘制View和控制器
AnimControler
这个类的功能很简单，绘制地板部分还有就是把计算后传过来的高度宽度赋给两支蜡烛，然后控制两支蜡烛各自开始动画。
mFirCandle=newFirCandle(mRelativeX+mWidth/6,mRelativeY+mHeight);
mFirCandle.initCandle(mFirCandleWidth,mFirCandleHeight);
mFirCandle.initAnim();
mSecCandle=newSecCandle(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(newAnimatorListenerAdapter(){
@Overrwww.shanxiwang.netide
publicvoidonAnimationRepeat(Animatoranimation){
invalidate();
}
});
mInvalidateAnimator.start();
这个属性动画履行的任务就是快速的刷新界面，是Candle的动画能够及时显示。
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
intwidth=measureDimension(WIDTH_DEFAULTmDensity,
widthMeasureSpec);
intheight=measureDimension(HEIGHT_DEFAULTmDensity,
heightMeasureSpec);
setMeasuredDimension(width,height);
}
publicintmeasureDimension(intdefaultSize,intmeasureSpec){
intresult;
intspecMode=MeasureSpec.getMode(measureSpec);
intspecSize=MeasureSpec.getSize(measureSpec);
if(specMode==MeasureSpec.EXACTLY){
result=specSize;
}else{
result=defaultSize;
if(specMode==MeasureSpec.AT_MOST){
result=Math.min(result,specSize);
}
}
returnresult;
}
@Override
protectedvoidonDraw(Canvascanvas){
if(!mIsInit){
initConfig();
mIsInit=true;
}
mAnimControler.drawMyView(canvas);
}
可以看到最后在view里面调用了我们的控制器，把cavas传过去了。
最后的tip：大家有没有发现每个动画的duration都是一样的。
三、最后
好了至此，本来一个简单的view自定义被我说了这么多。初次在简书上写，望大家多支持支持。
|
|
