因为百度的加载动画不是经常出现，以前就想做一个，今天有时间做了一个类似效果的加载动画，给大家分享一下。
这是百度的效果
百度效果
这是我仿百度的效果
demo效果
相关代码
public class BaiduProgress extends View {
/**
* 开始执行的第一个动画的索引，
* 由于第一个和第二个同时当执行，
* 当第一遍执行完毕后就让第一个停下来在中间位置，换原来中间位置的第三个开始执行动画，
* 以此类推，当第二遍执行完毕后第二个停下来，中间位置的开始执行动画。
*/
private int changeIndex = 0;
/** * 交换执行动画的颜色数组 */
private int[] colors = new int[]{
getResources().getColor(R.color.color_red),
getResources().getColor(R.color.color_blue),
getResources().getColor(R.color.color_black)};
/** * 动画所执行的最大偏移量（即中间点和最左边的距离） */
private Float maxWidth = 150f;
/** * 三个圆的半径 *
/private Float radius = 20f;
/** * 当前偏移的X坐标 */
private Float currentX = 0f;
/** * 画笔 */
private Paint paint;
/** * 属性动画 */
private ValueAnimator valueAnimator;
public BaiduProgress(Context context) { this(context, null);
}
public BaiduProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BaiduProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
startAnimator();
}
/** * 用属性动画实现位移动画 */
private void startAnimator() {
valueAnimator = ValueAnimator.ofFloat(0f, maxWidth, 0);
valueAnimator.addUpdateListener(
new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentX = (Float) animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
changePoint(changeIndex);
}
});
valueAnimator.setInterpolator(new LinearInterpolator());
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
valueAnimator.setRepeatCount(-1);valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
valueAnimator.setDuration(1000);
valueAnimator.start();
@Overrideprotected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centerX = getWidth() / 2;
int centerY = getHeight() / 2;
/**画左边的圆**/
paint.setColor(colors[0]);
canvas.drawCircle(centerX - currentX, centerY, radius, paint);
/**画右边的圆**/
paint.setColor(colors[1]);
canvas.drawCircle(centerX + currentX, centerY, radius, paint);
/**画中间的圆**/
paint.setColor(colors[2]);
canvas.drawCircle(centerX, centerY, radius, paint);}
/** * 每次让先执行动画的目标和中间停止的动画目标交换 * * @param a 最先执行 的动画的索引 */
private void changePoint(int a) {
int temp = colors[2];
colors[2] = colors[a];
colors[a] = temp;
if (a == 0) {
changeIndex = 1;
} else {
changeIndex = 0;
}
}
/** * 在View销毁时停止动画 */
@Overrideprotected void onDetachedFromWindow() {
super.onDetachedFromWindow();
valueAnimator.cancel();
}
重点
1、中间的圆固定不动，两边的圆对称运动。
2、每次当两边的圆在中点相遇，则改变颜色。
