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

作者: android的那点事 | 来源:发表于2017-12-21 14:26 被阅读82次

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

splash.gif

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

android高级进阶