安卓 自己动手实现守望先锋动画

起因：因为逛CSDN的时候无意间看到这篇博文（传送门），想给自己的项目加上这个加载效果，但是原谅我放荡不羁用不来（不知道为什么是用那个报一堆不知名的错误），于是我决定自己动手，丰衣足食。

先上效果：
















截图不是gif，请见谅。

下面来实现：（绘制一个正六边形我就不再多说）

先来绘制出所有的六边形：

按照上图所示：

六边形在没有x和y的偏移量的情况下，假设我们从左边的第一个定点开始绘制的话，那么

六边形的高等于：Math.sqrt(3)*六边形边长。

第一个出现位置的起始点坐标是：（六边形的高/2，六边形边长/2）。

第二个出现位置的起始点坐标是：（（六边形的高/2）*3，六边形的边长/2）.

第三个出现位置的起始点坐标是：（六边形的高*2，（六边形的边长/2）*3）.

第四个出现位置的起始点坐标是：（（六边形的高/2）*3，六边形边长*3）.

第五个出现位置的起始点坐标是：（六边形的高/2，六边形边长*3）.

第六个出现位置的起始点坐标是：（0，（六边形的边长/2）*3）.

第七个出现位置的起始点坐标是：（六边形的高，（六边形的边长/2）*3）.

其他点的计算就不一一列举了，都是很简单的数学计算。

先讲动画：

这里有一个动画，一种是显示的，一种隐藏的，但是隐藏的可以用显示的动画reverse（）来实现逆向动画。

下面是动画代码：

mShowAni = ValueAnimator.ofFloat(0,1);
mShowAni.setDuration(200);
mShowAni.setInterpolator(new DecelerateInterpolator());
mShowAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
@Override
public void onAnimationUpdate(ValueAnimator animation){
float value = (float)animation.getAnimatedValue();
mScale = 0.5f+value/2;
mPaint.setAlpha((int)(value*255));
invalidate();//更新
}
});

添加动画监听：

mShowAni.addListener(new Animator.AnimatorListener(){
@Override
public void onAnimationStart(Animator animation){

}

@Override
public void onAnimationEnd(Animator animation){
mShowAni.removeAllListeners();
mShowAni = null;
initAni();
if(drawNum!=8) {
backDrawNum = 8;//赋值回退动画的位置
drawNum++;//正向动画的位置自增1
}
if(drawNum==8 && backDrawNum!=0)
{
//开始播放逆向动画
backDrawNum--;
mShowAni.reverse();
}
else if(drawNum==8 && backDrawNum==0)
{
//逆向动画播放完毕，播放正向动画
drawNum = 1;
}
invalidate();
}

@Override
public void onAnimationCancel(Animator animation){

}

@Override
public void onAnimationRepeat(Animator animation){

}
});

现在可以来看看绘画代码了（代码很简单，必要的地方我已经加上了注释）：

public void DrawSix(Canvas canvas,Paint paint,int mLength,float Xoffset,float Yoffset,float scale)
{
Path mPath = new Path();
float height = (float)(Math.sqrt(3)*mLength);
mPath.moveTo(Xoffset,Yoffset+mLength/2);//初始点
mPath.lineTo(Xoffset+height/2,Yoffset);
mPath.lineTo(Xoffset+height,Yoffset+mLength/2);
mPath.lineTo(Xoffset+height,Yoffset+(mLength/2)*3);
mPath.lineTo(Xoffset+height/2,Yoffset+mLength*2);
mPath.lineTo(Xoffset,Yoffset+(mLength/2)*3);
mPath.lineTo(Xoffset,Yoffset+mLength/2);
mPath.close();//闭合路径
//Log.i("动画里","mScale:"+mScale);
if(scale!=-1) {//防止动画重复播放
if(mShowAni != null && ! mShowAni.isRunning()) {
mShowAni.start();
}
canvas.save();
canvas.scale(scale,scale,Xoffset + height / 2,Yoffset + mLength);
canvas.drawPath(mPath,paint);
canvas.restore();
}
else
{
//==-1的时候不播放动画，不处理会导致画面闪动
canvas.save();
canvas.scale(1,1,Xoffset + height / 2,Yoffset + mLength);
canvas.drawPath(mPath,paint);
canvas.restore();
}
}
/**
* 画守望六边形
* @param canvas
* @param paint
* @param mLength 半径
* @param Xoffset 偏移量
* @param Yoffset Y偏移量
* @param drawNum 绘画的位置
*/
public void DrawOWSix(Canvas canvas,Paint paint,int mLength,float Xoffset,float Yoffset,int drawNum,int backNum)
{
float height = (float)(Math.sqrt(3)*mLength);
float XoffsetZero = Xoffset;
float XoffsetOne = Xoffset+height/2;
float YoffsetOne = Yoffset;
float XoffsetTwo = Xoffset+(height/2)*3;
float XoffsetThree = Xoffset+height*2;
float YoffsetTwo = Yoffset+(mLength/2)*3;
float YoffsetThree = Xoffset+mLength*3;
float XoffsetCenter = Xoffset+height;
Paint defaultPaint = paint;//用来绘制已经播放完成动画的六边形
paint.setAlpha(255);
if(drawNum==8)
{
drawNum = backNum;
}
//画六边形，里面的-1赋值是用来让动画不再播放的
switch(drawNum) {
case 1:
DrawSix(canvas,paint,mLength,XoffsetOne,YoffsetOne,mScale);
break;
case 2:
DrawSix(canvas,defaultPaint,mLength,XoffsetOne,YoffsetOne,-1);
DrawSix(canvas,paint,mLength,XoffsetTwo + 3,YoffsetOne,mScale);
break;
case 3:
DrawSix(canvas,defaultPaint,mLength,XoffsetOne,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 3,YoffsetOne,-1);
DrawSix(canvas,paint,mLength,XoffsetThree + 6,YoffsetTwo + 3,mScale);
break;
case 4:
DrawSix(canvas,defaultPaint,mLength,XoffsetOne,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 3,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetThree + 6,YoffsetTwo + 3,-1);
DrawSix(canvas,paint,mLength,XoffsetTwo + 6,YoffsetThree + 6,mScale);
break;
case 5:
DrawSix(canvas,defaultPaint,mLength,XoffsetOne,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 3,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetThree + 6,YoffsetTwo + 3,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 6,YoffsetThree + 6,-1);
DrawSix(canvas,paint,mLength,XoffsetOne + 3,YoffsetThree + 6,mScale);
break;
case 6:
DrawSix(canvas,defaultPaint,mLength,XoffsetOne,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 3,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetThree + 6,YoffsetTwo + 3,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 6,YoffsetThree + 6,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetOne + 3,YoffsetThree + 6,-1);
DrawSix(canvas,paint,mLength,XoffsetZero,YoffsetTwo + 3,mScale);
break;
case 7:
DrawSix(canvas,defaultPaint,mLength,XoffsetOne,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 3,YoffsetOne,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetThree + 6,YoffsetTwo + 3,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetTwo + 6,YoffsetThree + 6,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetOne + 3,YoffsetThree + 6,-1);
DrawSix(canvas,defaultPaint,mLength,XoffsetZero,YoffsetTwo + 3,-1);
DrawSix(canvas,paint,mLength,XoffsetCenter + 3,YoffsetTwo + 3,mScale);
break;
default:
break;
}
}

接下来就要实现ondraw（）方法了：

@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
this.canvas = canvas;
DrawOWSix(this.canvas,mPaint,mLength,XOffset,YOffset,drawNum,backDrawNum);
}

实现构造方法（在这里对画笔，绘画大小，动画等进行初始化）：

public DrawStar(Context context,AttributeSet attrs){
super(context,attrs);
final TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.OverWatchLoadingView, 0, 0);
mColor = array.getColor(R.styleable.OverWatchLoadingView_view_color, Color.parseColor("#FFCC00"));
array.recycle();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setAlpha(0);
mPaint.setColor(mColor);
View = this;
mScale = 0;
initAni();
}

public DrawStar(Context context,AttributeSet attrs,int defStyleAttr,Paint mPaint){
super(context,attrs,defStyleAttr);
this.mPaint = mPaint;
View = this;
mScale = 0;
initAni();
}

public DrawStar(Context context,AttributeSet attrs,int defStyleAttr,int defStyleRes,Paint mPaint){
super(context,attrs,defStyleAttr,defStyleRes);
this.mPaint = mPaint;
View = this;
mScale = 0;
initAni();
}

当然，我们需要外部可以控制这些动画的播放，加上几个方法应该就可以了（并没有测试）。

public void pauseLoading()
{
mShowAni.pause();
}
public void continueLoading()
{
mShowAni.start();
}
public void cancelLoading()
{
mShowAni.cancel();
}

源码传送门（传送门）