一个简单的加载动画(一)
2016-09-23 本文已影响192人
Wang_Yi
最终效果,这个动画是在花瓣上看到的,主要是实现动画,
代码还有优化的地方懒得做了。什么时候用到这个再来封装下。
/**
* 一个简单的加载动画
*/
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);
}
}