譯文的GitHub地址：低版本實(shí)現(xiàn)共享元素動(dòng)畫

譯者注：好久沒(méi)錄gif 了 湊合的看吧 哈哈 希望對(duì)你們有點(diǎn)幫助

Share Element Transition

共享元素過(guò)渡動(dòng)畫是material設(shè)計(jì)重要的一部分，activity切換動(dòng)畫是一個(gè)讓用戶記住我們app的好方法。在切換動(dòng)畫中，共享元素動(dòng)畫可能是最常用的，在淘寶，各種外賣app都能看到這種動(dòng)畫(ios)。

共享元素動(dòng)畫在Lollipop+很容易實(shí)現(xiàn)，但是如果你想應(yīng)用在老版本上，有點(diǎn)麻煩，但也沒(méi)那么可怕，下面我會(huì)告訴你怎么實(shí)現(xiàn)它。

主要步驟

簡(jiǎn)單起見(jiàn)，我們的例子是從Activity A->Activity B并且他們共享一個(gè)元素(圖片內(nèi)容)。

Activity A是一個(gè)RecycleView列表頁(yè)面，點(diǎn)擊會(huì)item會(huì)跳轉(zhuǎn)到B頁(yè)面

Activity B是一個(gè)只顯示圖片的頁(yè)面

下面是幾個(gè)重要的步驟。

1. Activity A捕捉共享元素的初始值(位于屏幕的坐標(biāo)，view的寬高)，然后通過(guò)Intent傳遞給Activity B
2. Activity B初始設(shè)成全透明
3. Activity B讀取傳遞過(guò)來(lái)的值并準(zhǔn)備動(dòng)畫場(chǎng)景
4. Activity B開始執(zhí)行共享元素動(dòng)畫

下面我會(huì)詳解這些步驟并給出示范代碼。

首先，我們把Activity A的共享view稱為origin view,Activity B的共享view叫destination view,記住:這兩個(gè)view 雖然它們被稱為共享，但它們實(shí)際上是兩個(gè)獨(dú)立的視圖對(duì)象，只不過(guò)內(nèi)容相同。

讓我們開始吧。

1.Activity A 捕捉和傳遞初始值

在RecycleView的點(diǎn)擊事件相應(yīng)中，我們獲取圖片ImageView的相關(guān)信息，并傳遞給B

itemClickListener = new MainAdapter.RecycleItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Intent intent = new Intent();
                intent.setClass(A.this, B.class);
                intent.putExtra(VIEW_INFO_EXTRA, createViewInfoBundle(view));
                startActivity(intent);
                overridePendingTransition(0, 0);
            }
        };

要記住調(diào)用overridePendingTransition(0, 0)禁用默認(rèn)的過(guò)渡動(dòng)畫。

方法createViewInfoBundle主要返回view的位置和寬高

  private Bundle createViewInfoBundle(View view) {
    int[] screenLocation = new int[2];
    view.getLocationOnScreen(screenLocation);
    Bundle b = new Bundle();
    int left = screenLocation[0];
    int top = screenLocation[1];
    int width = view.getWidth();
    int height = view.getHeight();
    b.putInt("left", left);
    b.putInt("top", top);
    b.putInt("width", width);
    b.putInt("height", height);
    return b;
}

2.Activity B 背景設(shè)成透明

B頁(yè)面的布局很簡(jiǎn)單，ImageView默認(rèn)隱藏

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

    <ImageView
        android:id="@+id/iv_detail"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:scaleType="centerCrop"
        android:visibility="invisible"/>

</LinearLayout>

Activity B背景設(shè)成透明

<style name="Transparent" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

3.Activity B 接收信息并準(zhǔn)備動(dòng)畫場(chǎng)景

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_article_image);
    ...
    destinationView = findViewById(R.id.iv_detail);
    containerView = (LinearLayout) findViewById(R.id.container_detail);
    // 取出傳遞過(guò)來(lái)的originView信息
    extractViewInfoFromBundle(getIntent());
    //簡(jiǎn)單起見(jiàn)，我們直接設(shè)置本地圖片 不使用網(wǎng)絡(luò)加載圖片
    destinationView.setBackgroundDrawable(getResources().getDrawable(R.drawable.ic));
    onUiReady();
    ...
}


  private void onUiReady() {
        destinationView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                // remove previous listener
                destinationView.getViewTreeObserver().removeOnPreDrawListener(this);
                //準(zhǔn)備場(chǎng)景
                prepareScene();
                //播放動(dòng)畫
                runEnterAnimation();
                return true;
            }
        });
    }

 private void prepareScene() {
        int[] screenLocation = new int[2];
        destinationView.getLocationOnScreen(screenLocation);
        //移動(dòng)到起始view位置   
        deltaX = originViewLeft - screenLocation[0];
        deltaY = originViewTop - screenLocation[1];
        destinationView.setTranslationX(deltaX);
        destinationView.setTranslationY(deltaY);
        //縮放到起始view大小
        scaleX = (float) originViewWidth / destinationView.getWidth();
        scaleY = (float) originViewHeight / destinationView.getHeight();
        destinationView.setScaleX(scaleX);
        destinationView.setScaleY(scaleY);
    }

4.Activity B?執(zhí)行動(dòng)畫

private void runEnterAnimation() {
        destinationView.setVisibility(View.VISIBLE);
        //獲取圖片的顏色，設(shè)置背景色
        Bitmap bitmap = ((BitmapDrawable)getResources().getDrawable(R.drawable.ic)).getBitmap();
        Palette p = Palette.generate(bitmap);
        Palette.Swatch swatch = p.getDarkVibrantSwatch();
        containerView.setBackgroundColor(swatch.getRgb());
        //執(zhí)行動(dòng)畫
        destinationView.animate()
                .setDuration(DEFAULT_DURATION)
                .setInterpolator(DEFAULT_INTERPOLATOR)
                .scaleX(1f)
                .scaleY(1f)
                .translationX(0)
                .translationY(0)
                .start();

    }

別忘了點(diǎn)擊返回鍵的退出動(dòng)畫

    @Override
    public void onBackPressed() {
        runExitAnimation();
    }



    private void runExitAnimation() {
        destinationView.animate()
                .setDuration(DEFAULT_DURATION)
                .setInterpolator(DEFAULT_INTERPOLATOR)
                .scaleX(scaleX)
                .scaleY(scaleY)
                .translationX(deltaX)
                .translationY(deltaY)
                .withEndAction(new Runnable() {
                    @Override
                    public void run() {
                        finish();
                        overridePendingTransition(0, 0);
                    }
                }).start();
    }

好了，完事

但是如果應(yīng)用在產(chǎn)品上的話，你看淘寶或其他app，就會(huì)發(fā)現(xiàn)要A和B的圖片寬高比一定是相同，不然動(dòng)畫是不對(duì)的，我這里沒(méi)有處理。

相關(guān)參考

Android Shared-Element Transitions for all