使用SurfaceView绘制复杂效果

 

效果如下

 

风扇动画

粒子动画

 

 

 

1.动画分析：

根据复杂动画分解成简单的动画

上面的两个动画可以分解成最外层扩展动画以及里面六边形动画

最外层动画分解：

一个六边形从中心出发到外边，然后到另一个角，然后收回。里面的动画可以遮挡外边的六边形，最里面的六边形路径动画被里面六边形黑色背景遮挡。

中心六边形动画：

可以分成4层，最下层为六边形半透明背景，第二层为风扇或者粒子，第三层为六边形扫描动画，最上层为百分比

2.动画实现

电量

方案1:使用图片     计算文字位置，通过绘制Bitmap实现     优点:可以实现奇特文字效果    

方案2:绘制文字     计算文字位置，绘制文字     优点:1.修改方便。2.占用内存小。

选用方案二

String levelStr = String.valueOf(mBatteryLevel);
Rect levelRect = new Rect();
mBatteryPaint.setTextSize(mBatteryTextSize);
mBatteryPaint.getTextBounds(levelStr, 0, levelStr.length(), levelRect);
Rect percentRect = new Rect();
mBatteryPaint.setTextSize(mBatteryTextSize/2);
mBatteryPaint.getTextBounds(mPercentStr, 0, mPercentStr.length(), percentRect);
float space = mBatteryTextSize/5;
float drawX = mCenter.x-(levelRect.width()+percentRect.width()+space)/2f;
float drawY =  mCenter.y+levelRect.height()/2f;
mBatteryPaint.setTextSize(mBatteryTextSize);
canvas.drawText(levelStr,drawX, drawY, mBatteryPaint);
mBatteryPaint.setTextSize(mBatteryTextSize/2);
canvas.drawText(mPercentStr,drawX+levelRect.width()+space, drawY, mBatteryPaint);

六边形背景

方案1:使用图片     计算六边形位置，通过绘制Bitmap实现     优点:只需要计算图片位置，实现快    

方案2:绘制六边形路径     计算六边形的顶点，根据顶点绘制实心六边形     优点:1.修改方便。2.占用内存小。

六边形顶点位置计算如下

六边形背景顶点路径代码如下:

            final PointF regularHexagonBg = new PointF(mCenter.x+mRadius*mBackgroundRatio, mCenter.y);
            for(int index=0;index<POLYGON_COUNT;index++){
                if(index==0){
                    mRegularHexagonBgPath.reset();
                    mRegularHexagonBgPath.moveTo(startBgPoint.x, startBgPoint.y);

                }
                PointF point = Util.rotatePoint(regularHexagonBg, mCenter, START_ANGLE+ANGLE*index);
                mRegularHexagonBgPath.lineTo(point.x, point.y);

                if(in