Android绘图基础——仿华为加载动画

仿华为加载动画

一直觉得华为的加载小动画挺好的，既然前面把Path的相关知识复习了一下。那我们就做这个当做我们绘图基础的一个小练习。

一、练习点

• path的基础使用
• 画笔的基础使用
• pathMeasure的基础使用
• ValueAnimator的基础使用
• Interpolator插值器的使用

二、思路

我们前面可以看到，这个华为的加载圆圈的速度是先快后慢。所以此处我们使用Interolator中的AccelerateDecelerateInterpolator来满足当前位置的变换。然后通过PathMeasure获取当前运行的location坐标，最后绘制出来。

三、代码编写

/**
 * Created by Iflytek_dsw on 2017/6/20.
 */
public class HWLoadingView extends View {
    private PathMeasure pathMeasure;
    /**当前绘制圆弧的路径*/
    private Path pathCircle;
    /**测量路径圆的半径*/
    private Path pathMeasureCircle;
    /** 绘制圆圈的坐标x、y */
    private float x,y;
    /**圆圈的半径*/
    private static final int radius = 10;
    private static int strokeWidth = 4;
    /**圆圈的颜色*/
    private int circleColor = Color.parseColor("#28C0C6");
    /**圆弧的颜色*/
    private int circlePathColor = Color.parseColor("#C3C3C3");
    /**圆圈的画笔*/
    private Paint mCirclePaint;
    /**圆弧的画笔*/
    private Paint mCirclePathPaint;
    /**当前位置的坐标*/
    private float[] currentLocation = new float[2];
    private float[] currentTan = new float[2];
    public HWLoadingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mCirclePaint = new Paint();
        mCirclePaint.setColor(circleColor);
        mCirclePaint.setStyle(Paint.Style.FILL);
        mCirclePathPaint = new Paint();
        mCirclePathPaint.setStrokeWidth(strokeWidth);
        mCirclePathPaint.setColor(circlePathColor);
        mCirclePathPaint.setStyle(Paint.Style.STROKE);
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        //此处创建Path外围圆的路径
        pathCircle = new Path();
        pathMeasureCircle = new Path();
        pathCircle.addArc(new RectF(radius , radius, w/2 - radius, h/2 -radius), -90, 360);
        pathMeasureCircle.addArc(new RectF(radius , radius, w/2 - radius, h/2 -radius), -90, 359);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(pathCircle, mCirclePathPaint);
        if(x == 0 && y == 0){
            startAnimation();
        }else{
            canvas.drawCircle(x ,y, radius, mCirclePaint);
        }
    }

    /**
     * 开始绘制变换动画
     */
    private void startAnimation(){
        /**创建一个绑定路径Path的PathMeasure对象*/
        pathMeasure = new PathMeasure(pathMeasureCircle, false);
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
        valueAnimator.setDuration(3000);
        valueAnimator.setRepeatCount(-1);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //获取当前计算的值
                float len = (float) animation.getAnimatedValue();
                pathMeasure.getPosTan(len, currentLocation,currentTan);
                x = currentLocation[0];
                y = currentLocation[1];
                invalidate();
            }
        });
        valueAnimator.start();
    }
}

四、View的使用

1、main_layout布局中

<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"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    tools:context="com.dsw.hwloading.MainActivity">

    <com.dsw.hwloading.HWLoadingView
        android:layout_width="200dp"
        android:layout_height="200dp" />
</RelativeLayout>

2、ManiActivity中

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

至此，完成第一个练习。