Android加载动画系列——FinePoiStarLoadingAnim

加载动画系列——FinePoiStarLoadingAnim"/>

Android加载动画系列——FinePoiStarLoadingAnim

Android加载动画系列——FinePoiStarLoadingAnim

我们在看一些美剧和日漫的时候，经常会有一些魔法师、信徒画一些奇怪的法阵。尤其是在看到佐助的六芒星写轮眼，我总是幻想自己能有一双那样的眼睛。今天就让我们来画一个六芒星法阵吧~

让我们先来看看效果图：

1、FinePoiStarLoadingAnim.java源码如下：

public class FinePoiStarLoadingAnim extends View {private float mWidth = 0f;private float mPadding = 0f;private Paint mPaintLine, mPaintCircle;private int hornCount = 5;private List<Point> listPoint = new ArrayList<>();private boolean isDrawPath = true;RectF rectF = new RectF();public FinePoiStarLoadingAnim(Context context) {this(context, null);}public FinePoiStarLoadingAnim(Context context, AttributeSet attrs) {this(context, attrs, 0);}public FinePoiStarLoadingAnim(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initPaint();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);if (getMeasuredWidth() > getHeight())mWidth = getMeasuredHeight();elsemWidth = getMeasuredWidth();mPadding = dip2px(1);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);setLayerType(LAYER_TYPE_SOFTWARE, null);listPoint.clear();for (int i = 0; i < hornCount; i++) {Point p = getPoint(mWidth / 2 - mPadding, (90 - 360 / hornCount) + 360 / hornCount * i);listPoint.add(p);}Point cp = null;float currenttime = (mAnimatedValue * 10 - (int) (mAnimatedValue * 10));if (mAnimatedValue >= 0 && mAnimatedValue <= 0.1f) {cp = drawOneEdge(currenttime, 1f, listPoint.get(0), listPoint.get(2));if (isDrawPath)drawPathEdge(canvas, listPoint.get(0), cp);else {canvas.drawCircle(mWidth / 2 - cp.x, mWidth / 2 - cp.y, mPadding, mPaintLine);}} else if (mAnimatedValue > 0.1f && mAnimatedValue <= 0.2f) {cp = drawOneEdge(currenttime, 1f, listPoint.get(2), listPoint.get(4));if (isDrawPath) {drawEdge(canvas, 1);drawPathEdge(canvas, listPoint.get(2), cp);} elsecanvas.drawCircle(mWidth / 2 - cp.x, mWidth / 2 - cp.y, mPadding, mPaintLine);} else if (mAnimatedValue > 0.2f && mAnimatedValue <= 0.3f) {cp = drawOneEdge(currenttime, 1f, listPoint.get(4), listPoint.get(1));if (isDrawPath) {drawEdge(canvas, 2);drawPathEdge(canvas, listPoint.get(4), cp);} elsecanvas.drawCircle(mWidth / 2 - cp.x, mWidth / 2 - cp.y, mPadding, mPaintLine);} else if (mAnimatedValue > 0.3f && mAnimatedValue <= 0.4f) {cp = drawOneEdge(currenttime, 1f, listPoint.get(1), listPoint.get(3));if (isDrawPath) {drawEdge(canvas, 3);drawPathEdge(canvas, listPoint.get(1), cp);} elsecanvas.drawCircle(mWidth / 2 - cp.x, mWidth / 2 - cp.y, mPadding, mPaintLine);} else if (mAnimatedValue > 0.4f && mAnimatedValue <= 0.5f) {cp = drawOneEdge(currenttime, 1f, listPoint.get(3), listPoint.get(0));if (isDrawPath) {drawEdge(canvas, 4);drawPathEdge(canvas, listPoint.get(3), cp);} elsecanvas.drawCircle(mWidth / 2 - cp.x, mWidth / 2 - cp.y, mPadding, mPaintLine);} else if (mAnimatedValue > 0.5f && mAnimatedValue <= 0.75f) {drawEdge(canvas, 5);rectF = new RectF(mPadding, mPadding,mWidth - mPadding, mWidth - mPadding);canvas.drawArc(rectF, -180 + ((90 - 360 / hornCount)), 360 / 0.25f * (mAnimatedValue - 0.5f), false, mPaintCircle);} else {mPaintCircle.setStrokeWidth(dip2px(1.5f));mPaintLine.setShadowLayer(1, 1, 1, Color.WHITE);drawEdge(canvas, 5);rectF = new RectF(mPadding, mPadding,mWidth - mPadding, mWidth - mPadding);canvas.drawArc(rectF, -180 + ((90 - 360 / hornCount)), 360, false, mPaintCircle);}mPaintCircle.setStrokeWidth(dip2px(1.0f));mPaintLine.setShadowLayer(0, 1, 1, Color.WHITE);}private Point drawOneEdge(float currenttime, float alltime, Point startP, Point endP) {float x = startP.x - (startP.x - endP.x) / alltime * currenttime;float y = startP.y - (startP.y - endP.y) / alltime * currenttime;Point resPoint = new Point(x, y);return resPoint;}private void drawFirstEdge(Canvas canvas) {canvas.drawLine(mWidth / 2 - listPoint.get(0).x, mWidth / 2 - listPoint.get(0).y, mWidth / 2 - listPoint.get(2).x, mWidth / 2 - listPoint.get(2).y, mPaintLine);}private void drawSecondEdge(Canvas canvas) {canvas.drawLine(mWidth / 2 - listPoint.get(2).x, mWidth / 2 - listPoint.get(2).y, mWidth / 2 - listPoint.get(4).x, mWidth / 2 - listPoint.get(4).y, mPaintLine);}private void drawThirdEdge(Canvas canvas) {canvas.drawLine(mWidth / 2 - listPoint.get(4).x, mWidth / 2 - listPoint.get(4).y, mWidth / 2 - listPoint.get(1).x, mWidth / 2 - listPoint.get(1).y, mPaintLine);}private void drawFourthEdge(Canvas canvas) {canvas.drawLine(mWidth / 2 - listPoint.get(1).x, mWidth / 2 - listPoint.get(1).y, mWidth / 2 - listPoint.get(3).x, mWidth / 2 - listPoint.get(3).y, mPaintLine);}private void drawFifthEdge(Canvas canvas) {canvas.drawLine(mWidth / 2 - listPoint.get(3).x, mWidth / 2 - listPoint.get(3).y, mWidth / 2 - listPoint.get(0).x, mWidth / 2 - listPoint.get(0).y, mPaintLine);}private void drawPathEdge(Canvas canvas, Point start, Point end) {canvas.drawLine(mWidth / 2 - start.x, mWidth / 2 - start.y, mWidth / 2 - end.x, mWidth / 2 - end.y, mPaintLine);}private void drawEdge(Canvas canvas, int edgeCount) {switch (edgeCount) {case 1:drawFirstEdge(canvas);break;case 2:drawFirstEdge(canvas);drawSecondEdge(canvas);break;case 3:drawFirstEdge(canvas);drawSecondEdge(canvas);drawThirdEdge(canvas);break;case 4:drawFirstEdge(canvas);drawSecondEdge(canvas);drawThirdEdge(canvas);drawFourthEdge(canvas);break;case 5:drawFirstEdge(canvas);drawSecondEdge(canvas);drawThirdEdge(canvas);drawFourthEdge(canvas);drawFifthEdge(canvas);break;}}private void initPaint() {mPaintLine = new Paint();mPaintLine.setAntiAlias(true);mPaintLine.setStyle(Paint.Style.FILL);mPaintLine.setColor(Color.WHITE);mPaintLine.setStrokeWidth(dip2px(1f));mPaintCircle = new Paint();mPaintCircle.setAntiAlias(true);mPaintCircle.setStyle(Paint.Style.STROKE);mPaintCircle.setColor(Color.WHITE);mPaintCircle.setStrokeWidth(dip2px(1));}public int dip2px(float dpValue) {final float scale = getContext().getResources().getDisplayMetrics().density;return (int) (dpValue * scale + 0.5f);}private Point getPoint(float radius, float angle) {float x = (float) ((radius) * Math.cos(angle * Math.PI / 180f));float y = (float) ((radius) * Math.sin(angle * Math.PI / 180f));Point p = new Point(x, y);return p;}private class Point {private float x;private float y;private Point(float x, float y) {this.x = x;this.y = y;}}public void startAnim() {stopAnim();startViewAnim(0f, 1f, 3500);}public void stopAnim() {if (valueAnimator != null) {clearAnimation();valueAnimator.setRepeatCount(0);valueAnimator.cancel();valueAnimator.end();mAnimatedValue = 0.75f;postInvalidate();}}ValueAnimator valueAnimator = null;float mAnimatedValue = 0.75f;private ValueAnimator startViewAnim(float startF, final float endF, long time) {valueAnimator = ValueAnimator.ofFloat(startF, endF);valueAnimator.setDuration(time);valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.setRepeatCount(ValueAnimator.INFINITE);//无限循环valueAnimator.setRepeatMode(ValueAnimator.RESTART);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {mAnimatedValue = (float) valueAnimator.getAnimatedValue();invalidate();}});valueAnimator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);}@Overridepublic void onAnimationStart(Animator animation) {super.onAnimationStart(animation);}@Overridepublic void onAnimationRepeat(Animator animation) {super.onAnimationRepeat(animation);}});if (!valueAnimator.isRunning()) {valueAnimator.start();}return valueAnimator;}public void setDrawPath(boolean isDrawPath) {this.isDrawPath = isDrawPath;}}

2、接着在layout布局文件中使用我们自定义的动画控件

<com.cyril.loadinganim.FinePoiStarLoadingAnimandroid:id="@+id/finepoistar"android:layout_width="80dp"android:layout_height="80dp"/>

3、然后在Activity中实现动画的播放和停止，使用事例如下：

finePoiStarLoadingAnim = (FinePoiStarLoadingAnim) findViewById(R.id.finepoistar);
finePoiStarLoadingAnim.startAnim();

4、  戳这里，小编带你去源码的下载地址：