自定义View-27 仿58同城加载数据动画

效果

aux2g-off1p.gif

1、效果分析

1.1、加载显示组合控件（布局）

1.2 、分析动画实现

1.2.1：下落动画同时阴影缩小，当下落动画执行完成，开始上抛动画同时阴影放大，当上抛动画执行完成开始下落动画。一直轮训执行。
1.2.2 ： 下落动画执行完毕的时候ShapeView改变形状。
1.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°。

2、代码实现

2.1、 加载显示组合控件（布局）

布局包含三个部分 = ShapeView（图形切换View，之前博客写过） + View(阴影背景 shape="oval") + TextView
布局如下：

在自定义ViewGoup加载显示

public class LoadingView extends FrameLayout {
    public LoadingView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initLayout();
    }
    private void initLayout() {
        //加载显示组合控件
        inflate(getContext(), R.layout.loading_view, this);
    }
}

2.2动画分析

2.2.1：下落动画同时阴影缩小，当下落动画执行完成，开始上抛动画同时阴影放大，当上抛动画执行完成开始下落动画。一直轮训执行

2.2.1.1 下落的速度应该是开始慢后来越来快的，上抛的速度应该是开始快后来越来越慢的

    public LoadingView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mTranslationDistance = dip2px(80);

        initLayout();
        //1.2.1  下落动画同时阴影缩小，当下落动画执行完成，开始上抛动画同时阴影放大，当上抛动画执行完成开始下落动画。一直轮训执行。
        startFallAni();
    }

    /**
     * 开始执行下落动画
     */
    private void startFallAni() {
        //下落动画同时阴影缩小
        ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", 0, mTranslationDistance);
        //2.2.1.1 下落的速度应该是开始慢后来越来快的 ,设置加速差值器
        translationAnimator.setInterpolator(new AccelerateInterpolator());

        ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 1.0f, 0.3f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATOR_DURATION);
        animatorSet.playTogether(translationAnimator, scaleAnimator);
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                //当下落动画执行完成，开始上抛动画
                startUpAni();
            }
        });
        animatorSet.start();
    }

    /**
     * 开始上抛动画
     */
    private void startUpAni() {
        //开始上抛动画同时阴影放大
        ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", mTranslationDistance, 0);
        //2.2.1.1 上抛的速度应该是开始快后来越来越慢的，设置减速插值器
        translationAnimator.setInterpolator(new DecelerateInterpolator());

        ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 0.3f, 1.0f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATOR_DURATION);
        animatorSet.playTogether(translationAnimator, scaleAnimator);
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                // 2.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°
                startRotation();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //当上抛动画执行完成开始下落动画
                startFallAni();
            }
        });
        animatorSet.start();
    }

2.2.2 ： 下落动画执行完毕的时候ShapeView改变形状

    /**
     * 开始执行下落动画
     */
    private void startFallAni() {
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                // 2.2.2 ： 下落动画执行完毕的时候ShapeView改变形状
                mShapeView.exchange();
            }
        });
        animatorSet.start();
    }

2.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°

    /**
     * 开始上抛动画
     */
    private void startUpAni() {
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                // 2.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°
                startRotation();
            }
        });
        animatorSet.start();
    }

    /**
     * 开始旋转动画
     */
    private void startRotation() {
        // 2.2.3 :正方形旋转180°，三角形旋转120°
        ObjectAnimator rotationAnimator = null;

        //判断当前图形是什么？
        switch (mShapeView.getCurrentShape()) {
            case Circle:
            case Square:
                rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, 180);
                break;

            case Triangle:
                rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, -120);
                break;

            default:
                break;
        }
        rotationAnimator.setInterpolator(new DecelerateInterpolator());
        rotationAnimator.setDuration(ANIMATOR_DURATION);
        rotationAnimator.start();
    }

完整代码

loadingview58