仿百度搜索加載動畫

因為百度的加載動畫不是經常出現，以前就想做一個，今天有時間做了一個類似效果的加載動畫，給大家分享一下。

這是百度的效果

百度效果

這是我上仿百度的效果

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、每次當兩邊的圓在中點相遇，則改變顏色。

來自：http://www.jianshu.com/p/e546df8f90bc