自定义View系列四仿58同城加载动画效果

这是早期的58同城的加载动画效果。说到加载动画效果，一般会用帧动画或者属性动画来实现，像京东和饿了么有一个小人一直在跑是用帧动画实现的，而我们今天写的这个则是用属性动画来实现。

加载动画效果图

loadingView.gif

Tips

通常有以下三种方式来实现自定义View

重写View来实现全新的控件
对现有View进行扩展
通过组合来实现新的控件

我们前面的三篇效果都是用第一种重写View来实现的，而本篇效果则是结合1&3来实现的组合控件

效果实现分析

效果图中控件摆放是从上到下的，我们自然想到组合控件继承LinearLayout实现。而控件主要由图中的三部分组成

第一部分：自定义一个可以轮询改变形状的View叫ShapeChangeView，对外提供变形的方法
第二部分：它作为第一部分的阴影展示，我们放一个椭圆形的View（ShadowView）即可
第三部分：放在控件最底层的TextView
分析动画效果：
- ShapeChangeView是上下的位移动画，而ShadowView是大小的缩放效果，这两个动画是同时执行的
- 两者关系是：当ShapeChangeView下落时，ShadowView放大；ShapeChangeView弹起时，ShadowView缩小
- 监听ShapeChangeView下落结束时，调用其改变形状的方法，弹起时让其改变形状
- 最后，在弹起和下落动画的结束时相互调用，便形成这种动画效果

接下来，我们就一步一步的实现这个效果

自定义轮询改变形状的ShapeChangeView

实现比较简单，主要是图形的轮询绘制

public class ShapeChangeView extends View {

    //初始形状
    public Shape mCurShape = Shape.CIRCLE;
    private Paint mPaint;
    private Path mPath;
    /**
     * 定义形状的枚举类型
     */
    public enum Shape {
        CIRCLE,
        RECTANGLE,
        TRIANGLE,
    }
    public ShapeChangeView(Context context) {
        this(context, null);
    }
    public ShapeChangeView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ShapeChangeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPath = new Path();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    /**
     * 获取当前View绘制的形状
     * @return
     */
    public Shape getCurShape() {
        return mCurShape;
    }
  
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //指定View的宽高
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width>height?height:width, width>height?height:width);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int center = getWidth() / 2;
        switch (mCurShape) {
            case CIRCLE:
                //画圆
                mPaint.setColor(ContextCompat.getColor(getContext(),R.color.circle_color));
                canvas.drawCircle(center, center, center, mPaint);
                break;
            case RECTANGLE:
                //画正方形
                mPaint.setColor(ContextCompat.getColor(getContext(),R.color.rect_color));
                canvas.drawRect(0, 0, getRight(), getBottom(), mPaint);
                break;
            case TRIANGLE:
                //用Path画三角形
                mPaint.setColor(ContextCompat.getColor(getContext(),R.color.triangle_color));
                //指定path的起点
                mPath.moveTo(getWidth() / 2, 0);
                mPath.lineTo(0, (float) (getWidth() / 2 * Math.sqrt(3)));
                mPath.lineTo(getWidth(), (float) (getWidth() / 2 * Math.sqrt(3)));
                canvas.drawPath(mPath, mPaint);
                break;
        }
    }
    /**
     *轮询改变当前View绘制的形状
     */
    public void changeShape() {
        switch (mCurShape) {
            case CIRCLE:
                mCurShape = Shape.RECTANGLE;
                break;
            case RECTANGLE:
                mCurShape = Shape.TRIANGLE;
                break;
            case TRIANGLE:
                mCurShape = Shape.CIRCLE;
                break;
        }
        invalidate();
    }

定义LoadingView组合控件的布局R.layout.layout_loading_view，摆放其三部分控件
```
    

    

    
```

继承LinearLayout定义组合控件LoadingView，加载布局并开启动画

/**
  *加载布局，初始化控件
  */
private void initLayout() {
  
        inflate(getContext(), R.layout.layout_loading_view, this);
        mShapeChangeView = findViewById(R.id.shapeChangeView);
        mShadowView = findViewById(R.id.shadowView);
        //开启动画
        post(new Runnable() {
            @Override
            public void run() {
                startFallAnimation();
            }
        });
    }
    /**
     * 定义 下落动画 和 阴影缩小动画
     */
    private void startFallAnimation() {
        if (isStopAnimation) {
            return;
        }
        //下落的动画
        ObjectAnimator translateAnimation = ObjectAnimator.ofFloat(mShapeChangeView, "translationY", 0, translateDistance);
        translateAnimation.setInterpolator(new AccelerateInterpolator());
        //阴影缩小动画
        ObjectAnimator scaleAnimation = ObjectAnimator.ofFloat(mShadowView, "scaleX", 1f, 0.4f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(translateAnimation, scaleAnimation);
        animatorSet.setDuration(animateTime);
        animatorSet.setInterpolator(new AccelerateInterpolator());

        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mShapeChangeView.changeShape();
                startUpAnimation();
            }
        });
        animatorSet.start();
    }
   /**
     * 定义 弹起动画 和 阴影放大动画
     */
    private void startUpAnimation() {
        if (isStopAnimation) {
            return;
        }
        //弹起的动画
        ObjectAnimator translateAnimation = ObjectAnimator.ofFloat(mShapeChangeView, "translationY", translateDistance, 0);
        //阴影放大的动画
        ObjectAnimator scaleAnimation = ObjectAnimator.ofFloat(mShadowView, "scaleX", 0.4f, 1f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(translateAnimation, scaleAnimation);
        animatorSet.setDuration(animateTime);
        animatorSet.setInterpolator(new DecelerateInterpolator());

        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                //弹起时旋转
                startRotateAnimation();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                startFallAnimation();
            }
        });
        animatorSet.start();

    }
 //旋转动画
    private void startRotateAnimation() {
        if (isStopAnimation) {
            return;
        }
        ObjectAnimator rotateAnimation = null;
        switch (mShapeChangeView.getCurShape()) {
            case CIRCLE:
            case RECTANGLE:
                rotateAnimation = ObjectAnimator.ofFloat(mShapeChangeView, "rotation", 0, 180);
                break;
            case TRIANGLE:
                rotateAnimation = ObjectAnimator.ofFloat(mShapeChangeView, "rotation", 0, -120);
                break;
        }
        rotateAnimation.setDuration(animateTime);
        rotateAnimation.start();
    }

项目Github地址：https://github.com/m1Koi/CustomViewPractice

小结

在实现效果的基础上，我们尽可能的也要考虑到性能优化。例如，上述效果中，在控件的setVisibility方法调用后，我们移除了控件中的View并将其本身从父布局移除，并且定义标志位isStopAnimation判断是否还要继续执行动画。具体详见代码中实现。

自定义View系列四 仿58同城加载动画效果