因?yàn)榘俣鹊募虞d動畫不是經(jīng)常出現(xiàn)棚壁，以前就想做一個(gè)变泄，今天有時(shí)間做了一個(gè)類似效果的加載動畫秋麸，給大家分享一下。
這是百度的效果
百度效果
這是我仿百度的效果
demo效果
相關(guān)代碼
public class BaiduProgress extends View {
/**
* 開始執(zhí)行的第一個(gè)動畫的索引猾警，
* 由于第一個(gè)和第二個(gè)同時(shí)當(dāng)執(zhí)行孔祸，
* 當(dāng)?shù)谝槐閳?zhí)行完畢后就讓第一個(gè)停下來在中間位置，換原來中間位置的第三個(gè)開始執(zhí)行動畫发皿，
* 以此類推崔慧，當(dāng)?shù)诙閳?zhí)行完畢后第二個(gè)停下來，中間位置的開始執(zhí)行動畫穴墅。
*/
private int changeIndex = 0;
/** * 交換執(zhí)行動畫的顏色數(shù)組 */
private int[] colors = new int[]{
getResources().getColor(R.color.color_red),
getResources().getColor(R.color.color_blue),
getResources().getColor(R.color.color_black)};
/** * 動畫所執(zhí)行的最大偏移量（即中間點(diǎn)和最左邊的距離） */
private Float maxWidth = 150f;
/** * 三個(gè)圓的半徑 *
/private Float radius = 20f;
/** * 當(dāng)前偏移的X坐標(biāo) */
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();
}
/** * 用屬性動畫實(shí)現(xiàn)位移動畫 */
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);}
/** * 每次讓先執(zhí)行動畫的目標(biāo)和中間停止的動畫目標(biāo)交換 * * @param a 最先執(zhí)行 的動畫的索引 */
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銷毀時(shí)停止動畫 */
@Overrideprotected void onDetachedFromWindow() {
super.onDetachedFromWindow();
valueAnimator.cancel();
}
重點(diǎn)
1惶室、中間的圓固定不動温自，兩邊的圓對稱運(yùn)動。
2皇钞、每次當(dāng)兩邊的圓在中點(diǎn)相遇悼泌，則改變顏色。
