屬性動畫 58同城資料載入動畫

紅橙Darren發表於2018-01-26
動畫

1.概述

  今早 5:30 起來給人回答問題，問題是 5:12 提的我嚇一跳，心裡在想這世界很努力的人太多了。週三下班有一個哥們一口氣問了我 3 個，他說他搞了一下午實在搞不定，我很耐心的回答了，但是三分鐘能解決的問題你要搞一下午，怪不得你說你天天加班到深夜。其實越是形勢不好的時候越是要練習內功，我們學會思考很重要，技術也只是技術而已。話不多說看看今天的效果：

58同城資料載入

2．效果實現 

  ** 2.1 佈局分析 **

  可以看到上圖可分為三部分，最上面是彈跳的幾何形狀圖形，中間是陰影指示器，最下面是文字，所以佈局用LinearLayout，最上面暫且放ImageView，中間陰影放ImageView , 最下面放玩命載入文字。

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

    <ImageView
        android:id="@+id/shapeLoadingView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="4dp" />

    <ImageView
        android:id="@+id/indication"
        android:layout_width="23dp"
        android:layout_height="3dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="82dp"
        android:src="@drawable/shadow" />

    <TextView
        android:id="@+id/promptTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/indication"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="18dp"
        android:text="玩命載入中..."
        android:textColor="#757575"
        android:textSize="14sp" />
</LinearLayout>
複製程式碼

**2.2 組合控制元件 LoadingView 繼承自 LinearLayout **

public class LoadingView extends LinearLayout{
    private ImageView mShapeLodingView,mIndicationView;
    private Context mContext;
    public LoadingView(Context context) {
        this(context, null);
    }
    public LoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        initLayout();
    }

    private void initLayout() {
        View.inflate(mContext, R.layout.load_view,this);
        mShapeLodingView = (ShapeLoadingView) findViewById(R.id.shapeLoadingView);
        mIndicationView = (ImageView) findViewById(R.id.indication);
    }
}
複製程式碼

2.3 動畫分析

  這裡可以看做兩個部分的動畫，一個是上面幾何圖形的下落上拋動畫，一個是中間陰影指示器放大縮小的動畫，如果能這樣組合就算實現了: 當幾何圖形下落時配合陰影放大，當幾何圖形上拋時配合中間陰影縮小。需要用到 ObjectAnimator 屬性動畫

 //初始化下落動畫
 private void initFreeFallAnimation() {
        // 下落動畫集合
        mFreeFallAnimatiorSet  = new AnimatorSet();
        // 幾何圖形的垂直位移動畫
        ObjectAnimator freeFallTranslationAnimator = ObjectAnimator.ofFloat(
                mShapeLodingView, "translationY", 0, mTranslationYDistance);
        // 定義動畫的變化率。
        freeFallTranslationAnimator.setInterpolator(new AccelerateInterpolator(factor));
        // 中間陰影縮小動畫
        ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationView,
                "scaleX", 1, 0.2f);

        mFreeFallAnimatiorSet.setDuration(ANIMATION_DURATION);
        mFreeFallAnimatiorSet.playTogether(freeFallTranslationAnimator, scaleIndication);

        mFreeFallAnimatiorSet.addListener(new AnimatorListenerAdapter() {
            //設定動畫監聽器，監聽該動畫的開始、停止、取消、結束等狀態，我們往往會用AnimtorListener介面卡類來只實現我們需要的方法
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                // 下落動畫結束，改變形狀，然後執行上拋動畫
                upThrow();
                mShapeLodingView.changeShape();
            }
        });
    }
複製程式碼

  上拋動畫其實和下落動畫差不多，只要在下落動畫執行完之後啟動上拋動畫即可，但是我們需要在下落動畫結束完後改變形狀，最直接的方式便是改變幾何影象 ImageView 的背景資源即可，但是個人認為這樣不是太好，所以需要自定義幾何形狀 ShapeLoadingView，然後提供一個 changeShape() 的方法，裡面呼叫 invalidate()，在 onDraw(Canvas canvas) 中畫對應的幾何形狀，具體請看這裡 自定義View - 仿 QQ 運動步數進度效果

  最後就剩兩個旋轉的動畫了，我們旋轉的動畫以及角度問題我們直接從自定義 ShapeLoadingView 中獲取，提供一個 getUpThrowRoteAnimation() 方法

/**
* 在ShapeLoadingView的構造方法中初始化旋轉動畫即可
*/
private void initRoteAnimation() {
    mRectRoteAnimation = ObjectAnimator.ofFloat(this,
        "rotation", 0, -120);
    mDefaultRoteAnimation = ObjectAnimator.ofFloat(this,
        "rotation", 0, 180);
}

/**
* 得到當前正在上拋時應該旋轉的動畫
*/
public ObjectAnimator getUpThrowRoteAnimation() {
    switch (mCureentShape){
        case SHAPE_RECT:
            return  mRectRoteAnimation;
        default:
            return mDefaultRoteAnimation;
    }
}
複製程式碼

給上拋動畫設定動畫監聽，在其 onAnimationStart() 中執行旋轉動畫


mUpThrowAnimatiorSet.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        //動畫結束,下落
        freeFall();
    }

    @Override
    public void onAnimationStart(Animator animation) {
        super.onAnimationStart(animation);
        // 動畫開始，和旋轉動畫一起執行
        startShapeRoteAnimator();
    }

    /**
    * 執行旋轉動畫
    */
    private void startShapeRoteAnimator() {
        ObjectAnimator roteAnimation  = mShapeLodingView.getUpThrowRoteAnimation();
        roteAnimation.setDuration(ANIMATION_DURATION);
        roteAnimation.setInterpolator(new DecelerateInterpolator(factor));
        roteAnimation.start();
    }
});
複製程式碼

2.3 優化效能

  網上有太多太多的 Demo 感覺都還很不錯，但是後期檢測效能的時候其實面臨很多問題，如果某些效果不是你寫的但是效能比較差的話其實很難改，要麼你特別熟悉別人的程式碼要麼你需要自己重新寫要麼得過且過。

    /**
     * 採用程式碼的方式新增
     *
     * @param parent
     * @return
     */
    public static LoadingView attach(ViewGroup parent) {
        LoadingView loadingView = new LoadingView(parent.getContext());
        loadingView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        parent.addView(loadingView);
        return loadingView;
    }

    /**
     * 優化效能
     * @param visibility
     */
    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(View.INVISIBLE);
        ViewGroup parent = (ViewGroup) this.getParent();
        if(parent != null){
            parent.removeView(this);
            mShapeView.clearAnimation();
            mShadowView.clearAnimation();
            this.removeAllViews();
            mStopAnimator = true;
        }
    }
複製程式碼

所有分享大綱：Android進階之旅 - 自定義View篇

視訊講解地址：http://pan.baidu.com/s/1slFJDOp

相關文章