仿百度搜索加载动画

因为百度的加载动画不是经常出现，以前就想做一个，今天有时间做了一个类似效果的加载动画，给大家分享一下。

这是百度的效果

百度效果

这是我仿百度的效果

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、每次当两边的圆在中点相遇，则改变颜色。

guthub相关地址