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

·  阅读 246
原文链接: mp.weixin.qq.com

直接上图吧,先看一下效果先:

看了效果是不是觉得超炫,想了解是怎么做的,从往下看;先看xml布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="sz.com.transitionpagedemo.MainActivity">

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/men110"/>
 <!--自定义动画VIEW-->
    <sz.com.transitionpagedemo.SplashView
        android:id="@+id/splashView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>复制代码

从上面布局看,很简单,用了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<mColorCombination.length;i++){
        canvas.save();//保存画布
        canvas.rotate(360*i/mColorCombination.length+mRotationAngle,0,0);//旋转画布
        mPaint.setColor(mColorCombination[i]);//设置画布的长度
        canvas.drawCircle(mBigCircleRadius,0,mSmallCircleRadius,mPaint);//画圆
        canvas.restore();
    }
}

/**重制背景色
 * @param canvas
 */
private void drawBackground(Canvas canvas) {
    canvas.drawColor(Color.WHITE);
}

/**
 * 小圆收缩效果绘制
 */
private class ShrinkDraw extends PanDraw{

    public ShrinkDraw() {
        final ValueAnimator valueAnimator1=ValueAnimator.ofInt(0,mBigCircleRadius);
        valueAnimator1.setDuration(1000);
        valueAnimator1.setInterpolator(new OvershootInterpolator(20));//这里做一个弹的效果
        valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBigCircleRadius= (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator1.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mPanDraw=new DiffusionDraw();//开始执行扩散水波纹效果绘制
                invalidate();
            }
        });
        valueAnimator1.reverse();//从反方向执行动画
    }

    @Override
    public void startDraw(Canvas canvas) {
        drawBackground(canvas);
        drawSmallCircle(canvas);
    }
}

/**
 * 扩散水波纹效果绘制
 */

private class DiffusionDraw extends PanDraw{
    public DiffusionDraw() {
        final ValueAnimator valueAnimator1=ValueAnimator.ofInt(0,mDiagonal);
        valueAnimator1.setDuration(1000);
        valueAnimator1.setInterpolator(new LinearInterpolator());
        valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mDiffusionRadius= (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator1.start();
    }
    /**
     * @param canvas
     * //绘制扩散水波纹效果,我是不断的改变画笔的宽度.画笔的宽度是屏的对角线长度的一半减去中间扩散圆的半径
     * 圆的半径是中间扩散圆半径加上画笔宽度的一半
     */
    @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);
    }
}复制代码

}

  • 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开发,性能优化等文章,更多请关注我的微信公众号:谢谢!

收藏成功!
已添加到「」, 点击更改