Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 實現Android5.0過渡動畫兼容庫

實現Android5.0過渡動畫兼容庫

編輯：關於Android編程

Android5.0之後為我們提供了許多炫酷的界面過渡效果，其中共享元素過渡也是很有亮點的一個效果，但這個效果只能在Android5.0之後使用，那今天我們就來將共享元素過渡效果兼容到Android4.0，讓5.0之前的手機也可以體驗這麼炫酷的效果吧。

A transition animation compatible Library.

兼容Android5.0之後轉場動畫至Android4.0。

github地址：https://github.com/zhangke3016/TranslationCompat

依慣例，首先來說下本文的行文思路吧：
一、頁面過渡兼容庫的使用
二、頁面過渡兼容庫實現原理淺析
三、用兼容庫將開源項目MaterialLogin動畫效果兼容至Android4.0

原項目地址：MaterialLogin將動畫效果兼容至Android4.0

一、頁面過渡兼容庫的使用

使用這個兼容庫也很簡單，首先，在要控制跳轉的頁面調用TransitionController.getInstance().startActivity方法來實現跳轉，在其中主要是傳入當前界面要過渡到另一頁面的過渡元素View，以及另一個頁面對應共享元素的View id值。
然後，在跳轉到的第二個頁面調用TransitionController.getInstance().show方法來實現元素的過渡，傳入參數也很簡單。
最後呢，在頁面返回的時候，調用TransitionController.getInstance().exitActivity方法即可。
這樣一個完整的界面過渡動畫基本就可以使用了，當然，為了讓實現的效果更炫酷，加入了對過渡動畫狀態的監聽，可以在動畫結束時加入自己的操作，為方便起見，兼容庫包含圓形元素過渡：調用ViewAnimationCompatUtils.createCircularReveal方法既可實現元素以圓形展開和收起，使用方式和ViewAnimationUtils類一致，以及矩形元素過渡：調用：ViewAnimationCompatUtils.createRectReveal方法既可實現元素以矩形方式以左、上、右、下四個方向展開。
具體代碼如下：

//參數一：當前Activity
//參數二：跳轉意圖
//參數三：當前頁面跳轉至下一頁面的View
//參數四：下一頁面關聯的View id
TransitionController.getInstance().startActivity(this,new Intent(this, RegisterActivity.class),fab,R.id.fab);

//跳轉後頁面調用：
TransitionController.getInstance().show(this,getIntent());
可在show方法調用之前設置監聽：
 TransitionController.getInstance().setEnterListener(new TransitionCustomListener() {
            @Override
            public void onTransitionStart(Animator animator) {
            }
            @Override
            public void onTransitionEnd(Animator animator) {
            }
            @Override
            public void onTransitionCancel(Animator animator) {
            }
        });
//界面退出的時候調用
TransitionController.getInstance().exitActivity(PageDetailActivity.this);

//增加界面圓形轉換動畫 
// 用法及參數和ViewAnimationUtils一致
ViewAnimationCompatUtils.createCircularReveal(cvAdd, cvAdd.getWidth()/2,0, fab.getWidth() / 2, cvAdd.getHeight());

//增加界面矩形轉換動畫 
Animator mAnimator = ViewAnimationCompatUtils.createRectReveal( nsv, 0, nsv.getHeight(),ViewAnimationCompatUtils.RECT_TOP);

二、頁面過渡兼容庫實現原理淺析

先講了這個兼容庫的用法，現在來聊聊它是怎麼實現的，可以把主要實現細分六步：

1、獲取跳轉頁面過渡元素的位置
2、將跳轉過渡元素的位置傳給下一個頁面
3、在跳轉到的頁面獲取位置信息並創建相同寬高大小的元素和其覆蓋屏幕的父容器，並將新創建的元素添加到父容器中，而父容器添加至根視圖中
4、獲取跳轉到的頁面元素截圖並將其設為創建元素的背景
5、將當前新元素位置與跳轉到頁面對比獲取縮放比例與移動距離並開始動畫，結束後將父容器隱藏
6、界面返回時將創建的父容器重新添加至下一個頁面動畫實現，將創建的元素以動畫形式返回初始位置，結束後移除父容器

1、獲取跳轉頁面過渡元素的位置

//rect 來存儲共享元素位置信息
Rect rect = new Rect();
// 獲取元素位置信息
view.getGlobalVisibleRect(rect);

2、將跳轉過渡元素的位置傳給下一個頁面

// 將位置信息附加到 intent 上
intent.setSourceBounds(rect);
intent.putExtra(TRANSITION_NEXT_ID, nextShowViewId);

3、在跳轉到的頁面獲取位置信息並創建相同寬高大小的元素和其覆蓋屏幕的父容器，並將新創建的元素添加到父容器中，而父容器添加至根視圖中

View virtalView = new View(activity);
                Bitmap cacheBitmap = BitmapUtil.getCacheBitmapFromView(next_view);


                // 獲取上一個界面中，元素的寬度和高度
                final int mOriginWidth = mRect.right - mRect.left;
                final int mOriginHeight = mRect.bottom - mRect.top;

                getBundleInfo(next_view,mOriginWidth,mOriginHeight,mRect);
                //創建覆蓋屏幕的父容器
                mContainer = new FrameLayout(activity);
                FrameLayout.LayoutParams mContainerParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                //父容器添加至根視圖中
                parent.addView(mContainer,mContainerParams);
                if (mBgColor!=-1)
                     mContainer.setBackgroundColor(ContextCompat.getColor(activity, mBgColor));

                FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(mOriginWidth, mOriginHeight);
                params.setMargins(mRect.left, mRect.top - BarUtils.getActionBarHeight(activity) -getStatusBarHeight(activity), mRect.right, mRect.bottom);

                virtalView.setBackgroundDrawable(new BitmapDrawable(activity.getResources(), cacheBitmap));
                //創建相同寬高大小的元素
                virtalView.setLayoutParams(params);
                //將新創建的元素添加到父容器中
                mContainer.addView(virtalView);

4、獲取跳轉到的頁面元素截圖並將其設為創建元素的背景

//獲取跳轉到的頁面元素截圖
Bitmap cacheBitmap = BitmapUtil.getCacheBitmapFromView(next_view);
//將其設為創建元素的背景
virtalView.setBackgroundDrawable(new BitmapDrawable(activity.getResources(), cacheBitmap));
/**
     * 獲取一個 View 的緩存視圖
     *
     * @param view
     * @return
     */
    public static Bitmap getCacheBitmapFromView(View view) {
        final boolean drawingCacheEnabled = true;
        view.setDrawingCacheEnabled(drawingCacheEnabled);
        view.buildDrawingCache(drawingCacheEnabled);
        final Bitmap drawingCache = view.getDrawingCache();
        Bitmap bitmap;
        if (drawingCache != null) {
            bitmap = Bitmap.createBitmap(drawingCache);
            view.setDrawingCacheEnabled(false);
        } else {
            bitmap = null;
        }
        return bitmap;
    }

5、將當前新元素位置與跳轉到頁面對比獲取縮放比例與移動距離並開始動畫，結束後將父容器隱藏

      //將當前新元素位置與跳轉到頁面對比獲取縮放比例與移動距離
      getBundleInfo(next_view,mOriginWidth,mOriginHeight,mRect);
      //開始動畫
      runEnterAnim(virtalView,next_view,mContainer);

       /**
     * 計算縮放比例，以及位移距離
     *
     * @param
     */
    private void getBundleInfo(View mView,int mOriginWidth,int mOriginHeight,Rect mRect) {
        // 計算縮放比例
        mScaleBundle.putFloat(SCALE_WIDTH, (float) mView.getWidth() / mOriginWidth);
        mScaleBundle.putFloat(SCALE_HEIGHT, (float) mView.getHeight() / mOriginHeight);

        Rect rect = new Rect();
        mView.getGlobalVisibleRect(rect);
        // 計算位移距離
        mTransitionBundle.putFloat(TRANSITION_X, (rect.left+(rect.right - rect.left) / 2) - (mRect.left + (mRect.right - mRect.left) / 2));
        mTransitionBundle.putFloat(TRANSITION_Y, (rect.top + (rect.bottom - rect.top) / 2) - (mRect.top + (mRect.bottom - mRect.top) / 2));

    }

/**
     * 模擬入場動畫
     */
    private void runEnterAnim(View next_view,final View realNextView,final FrameLayout mContainer) {

        next_view.animate()
                .setInterpolator(new LinearInterpolator())
                .setDuration(300)
                .scaleX(mScaleBundle.getFloat(SCALE_WIDTH))
                .scaleY(mScaleBundle.getFloat(SCALE_HEIGHT))
                .translationX(mTransitionBundle.getFloat(TRANSITION_X))
                .translationY(mTransitionBundle.getFloat(TRANSITION_Y))
        .setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                realNextView.setVisibility(View.GONE);
                if (mTransitionCustomListener!=null){
                    mTransitionCustomListener.onTransitionStart(animation);
                }
            }
            @Override
            public void onAnimationEnd(Animator animation) {
                mContainer.setVisibility(View.GONE);
                realNextView.setVisibility(View.VISIBLE);
                if (mTransitionCustomListener!=null){
                    mTransitionCustomListener.onTransitionEnd(animation);
                }
            }
            @Override
            public void onAnimationCancel(Animator animation) {
                if (mTransitionCustomListener!=null){
                    mTransitionCustomListener.onTransitionCancel(animation);
                }
            }
            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
    }

6、界面返回時將創建的父容器重新添加至下一個頁面動畫實現，將創建的元素以動畫形式返回初始位置，結束後移除父容器

/**
     * 模擬退場動畫
     */
    public void exitActivity(final Activity activity) {
        if (nResId!=-1 && mContainer!=null){
//先將創建的父容器從上一個頁面移除
            ((ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT)).removeView(mContainer);
            activity.finish();
            activity.overridePendingTransition(0,0);
            //將創建的父容器重新添加至下一個頁面
            ((ViewGroup) mFirstActivity.findViewById(Window.ID_ANDROID_CONTENT)).addView(mContainer);
            mContainer.setVisibility(View.VISIBLE);
            //開始動畫
            mContainer.getChildAt(0).animate()
                    .setInterpolator(new LinearInterpolator())
                    .setDuration(300)
                    .scaleX(1)
                    .scaleY(1)
                    .translationX(0)
                    .translationY(0)
                    .setListener(new Animator.AnimatorListener() {
                        @Override
                        public void onAnimationStart(Animator animation) {
                            mFirstView.setVisibility(View.INVISIBLE);
                        }
                        @Override
                        public void onAnimationEnd(Animator animation) {

                            mFirstView.setVisibility(View.VISIBLE);
                            mContainer.setVisibility(View.GONE);
                            //結束後移除父容器
                            ((ViewGroup) mFirstActivity.findViewById(Window.ID_ANDROID_CONTENT)).removeView(mContainer);
                            mContainer.removeAllViews();
                            mContainer = null;
                            mFirstView = null;
                            mFirstActivity =null;
                        }
                        @Override
                        public void onAnimationCancel(Animator animation) {
                        }
                        @Override
                        public void onAnimationRepeat(Animator animation) {
                        }
                    });

        }else{
            activity.finish();
            activity.overridePendingTransition(0,0);
        }
    }

三、用兼容庫將開源項目MaterialLogin動畫效果兼容至Android4.0

這裡就簡單說下兼容MaterialLogin的實現，
首先，界面跳轉，調用TransitionController.getInstance().startActivity(this,new Intent(this, RegisterActivity.class),fab,R.id.fab);方法既可，
之後，跳轉至注冊頁面，調用TransitionController.getInstance().setEnterListener設置動畫監聽，在過渡動畫結束時，調用ViewAnimationCompatUtils.createCircularReveal顯示圓形展開效果，最後返回調用TransitionController.getInstance().exitActivity(RegisterActivity.this);,炫酷的登錄頁面就實現啦。

項目github地址：https://github.com/zhangke3016/TranslationCompat 歡迎star、fork。

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
android開發之歡迎界面 Android 創建與解析XML（四）——詳解Pull方式 安卓工具類--------)打開或關閉軟鍵盤 基於Android中Webview使用自定義的javascript進行回調的問題詳解 android 源碼 下載 方法 手把手教你做視頻播放器（五）
Android通用流行框架大全

 1. 緩存 名稱 描述 DiskLruCach
Android 仿蘋果IOS6開關按鈕

先給大家展示下效果圖：不知道大家對效果圖感覺怎麼樣，個人覺還不錯，感興趣
基於Android中手勢交互的實現方法

閒來無事，琢磨琢磨Android中的手勢交互，發現網上在手勢方面的文章並
Android Studio 將module打成jar包

1.新建測試工程，工程裡面有兩個module，app是Android工程
閱讀排行版
Copyright © Android教程網 All Rights Reserved