效果

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
佈局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:gravity="center"
    android:orientation="vertical">

    <com.zsj.loadingview58.ShapeView
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginBottom="82dp" />


    <View
        android:layout_width="25dp"
        android:layout_height="3dp"
        android:background="@drawable/shadow_bg" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:text="正在載入中..." />

</LinearLayout>

在自定義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