因為百度的加載動畫不是經常出現，以前就想做一個，今天有時間做了一個類似效果的加載動畫，給大家分享一下。
這是百度的效果
百度效果
這是我仿百度的效果
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、每次當兩邊的圓在中點相遇，則改變顏色。
