效果圖
loading.gif
分析動(dòng)畫
首先分析動(dòng)畫，如上圖所示：動(dòng)畫由三個(gè)圓形幾何圖形組成味咳，中間圓形圖案不動(dòng)庇勃，左側(cè)右側(cè)圓形圖案向中間平移，到達(dá)中間后槽驶，圓形圖案變換顏色责嚷，在進(jìn)行反向平移。
動(dòng)畫慢放如下：
loadingslow.gif
慢放圖我們可以看出圓形圖案交換顏色的順序?yàn)椋?br> 左->中 中->右 右->左
進(jìn)行繪制
主要運(yùn)用Drawable動(dòng)畫進(jìn)行繪制掂铐。
public class ThreeBallsLoadingDrawable extends Drawable implements Animatable {
}
準(zhǔn)備三只畫筆罕拂，分別繪制三個(gè)圓形圖案
private Paint mLeftPaint,mMiddlePaint,mRightPaint;
@Override
public void draw(Canvas canvas) {
canvas.save();
//平移
canvas.translate(translateX,0);
canvas.drawCircle(RADIUS,mHeight/2,RADIUS,mLeftPaint);
canvas.restore();
canvas.save();
canvas.drawCircle(mWidth/2,mHeight/2,RADIUS,mMiddlePaint);
canvas.restore();
canvas.save();
canvas.translate(-translateX,0);
canvas.drawCircle(mWidth-RADIUS,mHeight/2,RADIUS,mRightPaint);
canvas.restore();
}
進(jìn)行動(dòng)畫部分代碼編寫，主要運(yùn)用ValueAnimator
- 分析動(dòng)畫全陨，左側(cè)圓形圖案爆班，向右平移到中間，然后變換顏色辱姨，在反向平移到原來位置柿菩。所以我們動(dòng)畫分為兩部分，向內(nèi)平移和向外平移雨涛。向內(nèi)平移動(dòng)畫結(jié)束枢舶，變化圓形圖案顏色（變化策略在上方）
/**
* 向內(nèi)平移
*/
private void innerMove() {
final ValueAnimator translateXInnerAnimation = ValueAnimator.ofFloat(0,170);
translateXInnerAnimation.setDuration(ANIMATION_DURATION);
translateXInnerAnimation.setInterpolator(new AccelerateInterpolator());
translateXInnerAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
translateX = (float) translateXInnerAnimation.getAnimatedValue();
invalidateSelf();
}
});
translateXInnerAnimation.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//變換顏色
exchangeColor();
expendMove();
}
});
translateXInnerAnimation.start();
}
/**
* 向外平移
*/
private void expendMove(){
final ValueAnimator translateXExpendAnimation = ValueAnimator.ofFloat(170,0);
translateXExpendAnimation.setDuration(ANIMATION_DURATION);
translateXExpendAnimation.setInterpolator(new DecelerateInterpolator());
translateXExpendAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
translateX = (float) translateXExpendAnimation.getAnimatedValue();
invalidateSelf();
}
});
translateXExpendAnimation.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
innerMove();
}
});
translateXExpendAnimation.start();
}
/**
* 變換顏色方法
*/
private void exchangeColor(){
int mLeftPaintColor = mLeftPaint.getColor();
int mRightPaintColor = mRightPaint.getColor();
int mMiddlePaintColor = mMiddlePaint.getColor();
mLeftPaint.setColor(mRightPaintColor);
mRightPaint.setColor(mMiddlePaintColor);
mMiddlePaint.setColor(mLeftPaintColor);
}
動(dòng)畫使用
在ImageView中設(shè)置drawable即可
ThreeBallsLoadingDrawable threeBallsLoadingDrawable = new ThreeBallsLoadingDrawable();
imageView.setImageDrawable(threeBallsLoadingDrawable);
threeBallsLoadingDrawable.start();
