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

直接上图吧,先看一下效果先:
android高级自定义控件(超炫加载过渡特效)_第1张图片

看了效果是不是觉得超炫,想了解是怎么做的,从往下看;
先看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.开始绘制动画,这个动画分为三段,第一段是绘制小圆,有6个小圆,绕着中心点旋转;第二段是小圆向外扩散然后再收缩成一个圆,第三段是扩散水波纹效果;这三段动画都是要绘制的,这里我采用了策略模式;先写一个抽象类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

你可能感兴趣的:(高级UI)