最终效果,这个动画是在花瓣上看到的,主要是实现动画, 代码还有优化的地方懒得做了。什么时候用到这个再来封装下。
/** * 一个简单的加载动画 */ public class LoadingView extends View { /** * 三个外圈圆的背景色 */ private int leftCircleColor = Color.parseColor("#e83939"); private int centerColor = Color.parseColor("#70c7d4"); private int rightColor = Color.parseColor("#FF4081"); /** * 控件宽高 */ private int mWidth; private int mHeight; /** * 三个外圈圆的半径和padding */ private int circleRadius; private int circlePadding; /** * 左右圆动画的最大和最小半径 */ private int leftAndRightMaxRadius; private int leftAndRightMinRadius; private int leftInsideRadius; private int rightInsideRadius; /** * 中心圆动画的最大半径 */ private int centerMaxRadius; private int centerMinRadius; private int centerInsideRadius; /** * 值动画是否正在播放 */ private boolean animPlaying; public LoadingView(Context context) { super(context); init(null); } public LoadingView(Context context, AttributeSet attrs) { super(context, attrs); init(attrs); } public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(attrs); } private void init(AttributeSet attrs) { circleRadius = dip2px(15); circlePadding = dip2px(50); leftAndRightMaxRadius = dip2px(9); leftAndRightMinRadius = dip2px(3); centerMaxRadius = dip2px(12); centerMinRadius = dip2px(6); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mWidth == 0 || mHeight == 0) return; //画左边外圈 Paint leftOutSideCircle = new Paint(); leftOutSideCircle.setColor(leftCircleColor); leftOutSideCircle.setAntiAlias(true); canvas.drawCircle(mWidth / 2 - circlePadding, mHeight / 2, circleRadius, leftOutSideCircle); //画中心外圈圆 Paint centerOutSidePaint = new Paint(); centerOutSidePaint.setAntiAlias(true); centerOutSidePaint.setColor(centerColor); canvas.drawCircle(mWidth / 2, mHeight / 2, circleRadius, centerOutSidePaint); //画右边外圈圆 Paint rightOutSidePaint = new Paint(); rightOutSidePaint.setColor(rightColor); rightOutSidePaint.setAntiAlias(true); canvas.drawCircle(mWidth / 2 + circlePadding, mHeight / 2, circleRadius, rightOutSidePaint); //值动画播放完成继续开始重新播放 if (!animPlaying) { startAnim(); animPlaying = true; } //左边中心圆 Paint leftInSideCircle = new Paint(); leftInSideCircle.setColor(Color.WHITE); leftInSideCircle.setAntiAlias(true); canvas.drawCircle(mWidth / 2 - circlePadding, mHeight / 2, leftInsideRadius, leftInSideCircle); //中间中心圆 Paint centerInSidePaint = new Paint(); centerInSidePaint.setAntiAlias(true); centerInSidePaint.setColor(Color.WHITE); canvas.drawCircle(mWidth / 2, mHeight / 2, centerInsideRadius, centerInSidePaint); //右边中心圆 Paint rightInSidePaint = new Paint(); rightInSidePaint.setColor(Color.WHITE); rightInSidePaint.setAntiAlias(true); canvas.drawCircle(mWidth / 2 + circlePadding, mHeight / 2, rightInsideRadius, rightInSidePaint); } private void startAnim() { final ValueAnimator mValueAnim = ValueAnimator.ofInt(1); mValueAnim.setInterpolator(new LinearInterpolator()); mValueAnim.setDuration(800); mValueAnim.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animator) { } @Override public void onAnimationEnd(Animator animator) { int tempA = centerMinRadius; centerMinRadius = centerMaxRadius; centerMaxRadius = tempA; int tempB = leftAndRightMaxRadius; leftAndRightMaxRadius = leftAndRightMinRadius; leftAndRightMinRadius = tempB; animPlaying = false; invalidate(); } @Override public void onAnimationCancel(Animator animator) { } @Override public void onAnimationRepeat(Animator animator) { } }); mValueAnim.setRepeatMode(ValueAnimator.RESTART); mValueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float fraction = mValueAnim.getAnimatedFraction(); centerInsideRadius = evaluate(fraction, centerMaxRadius, centerMinRadius); leftInsideRadius = evaluate(fraction, leftAndRightMinRadius, leftAndRightMaxRadius); rightInsideRadius = evaluate(fraction, leftAndRightMaxRadius, leftAndRightMinRadius); Log.i("===TAG===", "centerInsideRadius-" + centerInsideRadius + "leftInsideRadius-" + leftInsideRadius + "rightInsideRadius-" + rightInsideRadius); invalidate(); } }); mValueAnim.start(); } public int evaluate(float fraction, int startValue, int endValue) { return (int) (startValue + fraction * (endValue - startValue)); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; } public int dip2px(float dpValue) { final float scale = getContext().getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } }复制代码