android高级自定义控件（超炫加载过渡特效）

直接上图吧，先看一下效果先：

splash.gif

看了效果是不是觉得超炫，想了解是怎么做的，从往下看；
先看xml布局：

从上面布局看，很简单，用了FrameLayout，先放了ImageView，就是我们看到动画执行到最后的效果；然后再加上我们自定义的动画SplashView;好吧，我们下面着重了解自定义SplashView；

package sz.com.transitionpagedemo;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;


public class SplashView extends View {
private int mBigCircleRadius=120;//大圆半径
private int mSmallCircleRadius=18;//小圆半径
private int[] mColorCombination={getResources().getColor(R.color.colorPrimary),
        getResources().getColor(R.color.colorPrimaryDark),
        getResources().getColor(R.color.colorAccent),
        getResources().getColor(R.color.colorPrimary),
        getResources().getColor(R.color.colorPrimaryDark),
        getResources().getColor(R.color.colorAccent)};//颜色数组
private int mWidth;//宽
private int mHight;//高
private Paint mPaint;
private PanDraw mPanDraw;
private float mRotationAngle;//小圆旋转角度
private ValueAnimator valueAnimator;
private int mDiffusionRadius;//扩散半径
private int mDiagonal;//View对角线的一半

public SplashView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public SplashView(Context context) {
    super(context);
    init();
}
//初始化画笔
private void init() {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = w;
    mHight = h;
    //得到View对角线的一半
    mDiagonal = (int) (Math.sqrt(w*w+h*h)/2);
}

/**
 * 加载完成，小圆旋转状态转成收缩状态
 */
public void loadingCompleted(){
    valueAnimator.cancel();//取消小圆旋转动画
    mPanDraw=new ShrinkDraw();
    invalidate();
}



@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mPanDraw==null){
        mPanDraw = new SmallCircleDraw();
    }
    mPanDraw.startDraw(canvas);
}

/**
 * 绘制抽像出来，这里用到了策略模式
 */
public abstract class PanDraw{
    //开始绘制
    public abstract  void  startDraw(Canvas canvas) ;
}

/**
 * 绘制小圆
 */
private class SmallCircleDraw extends PanDraw{

    public SmallCircleDraw() {
        valueAnimator = ValueAnimator.ofFloat(0f,360F);
        valueAnimator.setDuration(2000);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mRotationAngle=  (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);//无限重复动画
        valueAnimator.start();
    }
    @Override
    public void startDraw(Canvas canvas) {
        drawBackground(canvas);
        drawSmallCircle(canvas);
    }
}

private void drawSmallCircle(Canvas canvas) {
    //如果颜色数组为空时，不绘制
    if (mColorCombination==null){
        return;
    }
    canvas.translate(mWidth/2,mHight/2);
    for (int i=0;i

}

• a.开始我们做了一些初始化工作，比如画笔的设置，然后onSizeChanged方法中得到View的宽和高，并且算出View对角线一半的长度；

• b.开始绘制动画，这个动画分为三段，第一段是绘制小圆，有６个小圆，绕着中心点旋转；第二段是小圆向外扩散然后再收缩成一个圆，第三段是扩散水波纹效果；这三段动画都是要绘制的，这里我采用了策略模式；先写一个抽象类PanDraw；

   /**
   * 绘制抽像出来，这里用到了策略模式
   */
  public abstract class PanDraw{
    //开始绘制
    public abstract  void  startDraw(Canvas canvas) ;
  }
  

• c.分别实现开绍绘制 startDraw(Canvas canvas)方法，开始绘制；

• d.绘制小圆时，用了属性动画,不断的改变旋转的角度，达到旋转的效果，这个动画设成了无限复动画，绘制过程，先把画布的中心点移动到View的中心点位置，然后编历小圆总数绘制小圆，这里采用的画布旋转的方式画个小圆；

  canvas.rotate(360*i/mColorCombination.length+mRotationAngle,0,0);//旋转画布
  

• e.绘制扩散小圆，这里绘制过程跟上面是一样的，只是不断改变小圆离中心点的位置，最后合在一起，从上面的效果来看，这个小圆是先扩散后收缩的，是用了属性动画的插值器，如果不了解属性插值器，可以找下我写的文章android高级UI之补间动画和属性动画；

  valueAnimator1.setInterpolator(new OvershootInterpolator(20));//这里做一个弹的效果
  

• f.绘制扩散水波纹效果,这里巧用了画笔的宽度设置;不断的改变画笔的宽度．画笔的宽度是屏的对角线长度的一半减去中间扩散圆的半径,圆的半径是中间扩散圆半径加上画笔宽度的一半;

   @Override
  public void startDraw(Canvas canvas) {
    mPaint.setColor(Color.WHITE);
    mPaint.setStyle(Paint.Style.STROKE);
    canvas.translate(mWidth/2,mHight/2);
    float mStrokeWidth=(mDiagonal-mDiffusionRadius);
    mPaint.setStrokeWidth(mStrokeWidth);
    canvas.drawCircle(0,0,mDiffusionRadius+mStrokeWidth/2,mPaint);
  

  }

• g.加载完成，小圆旋转状态转成收缩状态

  /**
   * 加载完成，小圆旋转状态转成收缩状态
   */
  public void loadingCompleted(){
   valueAnimator.cancel();//取消小圆旋转动画
  mPanDraw=new ShrinkDraw();
  invalidate();
  }
  

• h.在MainActivity中，设置小圆旋转的时间，过渡到小圆扩散效果；

    public class MainActivity extends AppCompatActivity {
    private SplashView splashView;
    @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    splashView = (SplashView) findViewById(R.id.splashView);
    Handler handler =new Handler();
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {
      //5秒后过渡到小圆打散效果；
            splashView.loadingCompleted();
          }
      },5000);
  }
  }
  

本人做android开发多年,以后会陆续更新关于android高级UI,NDK开发,性能优化等文章,更多请关注我的微信公众号:谢谢!

image