Android 轉(zhuǎn)場動(dòng)畫Transition 、Share Elements

一款好的app沒有動(dòng)畫是肯定不行的（尼古拉斯.趙四）

今天在寫了個(gè)Demo的加了一下轉(zhuǎn)場動(dòng)畫，效果如下：

GIF.gif

此Demo包含了Transition 、Share Elements兩種動(dòng)畫效果，分別在Activity和fragment中實(shí)現(xiàn)，API 19 以上支持，以下就顯示沒有動(dòng)畫效果

Transition 的進(jìn)場動(dòng)畫

相關(guān)的方法在這里：

轉(zhuǎn)場動(dòng)畫作用與window上，Activity 中獲取Window，使用 getWindow() 方法即可獲取到：

image.png
  • setExitTransition() ：當(dāng)A startB時(shí)，使A中的View退出場景的transition 在A中設(shè)置
  • setEnterTransition() ：當(dāng)A startB時(shí)，使B中的View進(jìn)入場景的transition 在B中設(shè)置
  • setReturnTransition() ：當(dāng)B 返回A時(shí)，使B中的View退出場景的transition 在B中設(shè)置
  • setReenterTransition() ： 當(dāng)B 返回A時(shí)，使A中的View進(jìn)入場景的transition 在A中設(shè)置
  • setAllowEnterTransitionOverlap()：是否運(yùn)行布局顯示時(shí)重疊
  • setAllowReturnTransitionOverlap()：是否運(yùn)行布局顯示時(shí)重疊

需要配合使用才有對(duì)應(yīng)的效果，單獨(dú)使用是無效的（已實(shí)踐）

這些方法的參數(shù)大部分都有一個(gè) Transition，介紹下：

image.png

Transition 的繼承類是這些，就是平移動(dòng)畫玩出花來了。。。

自定義的 Transition 也可以哦

Visibility 類動(dòng)畫轉(zhuǎn)場，可見性（目前就學(xué)了這個(gè)）
image.png

只有三個(gè)繼承類：

  • Explode :擴(kuò)散式
  • Fade：漸隱式
  • Slide：平移式

首先要在onCreate中設(shè)置，要在setContentView前面哦：

// 允許使用transitions  
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
//或者在主題中加入
<item name="android:windowContentTransitions" tools:targetApi="lollipop">true</item>
//還要加一條，不然會(huì)出現(xiàn)白屏哦
<item name="android:windowIsTranslucent">true</item>

Acitivity1:

        Fade fade = new Fade();//漸隱
        fade.setDuration(500);
        Slide slide = new Slide(Gravity.END);//右邊平移
        slide.setDuration(500);
        Explode explode = new Explode();//展開回收
        explode.setDuration(500);
        getWindow().setReenterTransition(slide);
        getWindow().setExitTransition(explode);
        getWindow().setAllowEnterTransitionOverlap(false);
        getWindow().setAllowReturnTransitionOverlap(false);

....Intent 代碼

        Intent i = new Intent(this, target);
        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this);
//      兩種方法都能用，不要問我源碼怎么實(shí)現(xiàn)，沒空研究了
//      ActivityOptionsCompat transitionActivityOptions =ActivityOptionsCompat.makeSceneTransitionAnimation(this);
        startActivity(i, transitionActivityOptions.toBundle());

Acitivity2:

        Explode explode = new Explode();
        explode.setDuration(500);
        Slide slide = new Slide();
        slide.setDuration(500);
        slide.setSlideEdge(Gravity.START);
        getWindow().setEnterTransition(slide);
        getWindow().setReturnTransition(explode);
GIF.gif

簡單實(shí)用！

Share Elements 的進(jìn)場動(dòng)畫

  • Activity 通過getWindow來設(shè)置，看源碼。。。目測沒有開放
Window類源碼

  • Fragment 中，這個(gè)開放了


    Fragment 源碼

  • setSharedElementEnterTransition()
    當(dāng)A startB 時(shí)，共享元素以A中的位置作為起始，B中的位置為結(jié)束來播放動(dòng)畫。在B中設(shè)置

  • setSharedElementReturnTransition()
    當(dāng)B 返回A時(shí)，共享元素以B中的位置作為起始，A中的位置為結(jié)束來播放動(dòng)畫。在B中設(shè)置

請(qǐng)看源碼：一步兩步找到里面的 AnimationInfo ，這個(gè)類保存了我們的動(dòng)畫

Fragment 源碼
Fragment 源碼

AnimationInfo 初始化的時(shí)候，有些設(shè)置了默認(rèn)的過渡效果，為null的才是我們需要設(shè)置的

    static class AnimationInfo {
    ...
        private Object mEnterTransition = null;
        private Object mReturnTransition = USE_DEFAULT_TRANSITION;
        private Object mExitTransition = null;
        private Object mReenterTransition = USE_DEFAULT_TRANSITION;
        private Object mSharedElementEnterTransition = null; //手動(dòng)設(shè)置
        private Object mSharedElementReturnTransition = USE_DEFAULT_TRANSITION; //系統(tǒng)有默認(rèn)
        private Boolean mAllowReturnTransitionOverlap;
        private Boolean mAllowEnterTransitionOverlap;

在Activity 中動(dòng)畫就不用我們考慮了，人家壓根不給你設(shè)置，fragment中 setSharedElementEnterTransition需要我們自己來設(shè)置，setSharedElementEnterTransition有默認(rèn)可以不設(shè)置，mAllowReturnTransitionOverlap 和 mAllowEnterTransitionOverlap 都是默認(rèn)為 false

（必須）使用 Share Elements 前，需要設(shè)置共享元素的 transitionName

//XML中設(shè)置
android:transitionName="image1"
//或者代碼設(shè)置
mImageView1.setTransitionName("image1");
//或者
Pair.create(imageView, "image1")

上完成代碼！ Acitivity1:（共享元素四個(gè)兩個(gè)imageView，兩個(gè)TextView）

Intent代碼---
    //share elements 多個(gè)元素
    private void transitionToActivity(Class target, ImageView imageView, ImageView imageView2, TextView text1, TextView text2) {
        Pair[] pairs = new Pair[]{Pair.create(imageView, "image1"), Pair.create(imageView2, "image2"),
                Pair.create(text1, "text1"), Pair.create(text2, "text2")};
        Intent i = new Intent(this, target);
        ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs);
        startActivity(i, transitionActivityOptions.toBundle());
    }

Acitivity2:(這些只是設(shè)置給子元素而已,android:transitionName已經(jīng)在XML中設(shè)置)

        Fade fade = new Fade();
        fade.setDuration(500);
        Slide slide = new Slide(Gravity.END);
        slide.setDuration(500);
        getWindow().setReturnTransition(fade);
        getWindow().setEnterTransition(slide);
GIF.gif

Share Elements Activity 和 fragment 交互

activity1：

    //share elements 單個(gè)元素
    private void startActivity(Class target, ImageView imageView1) {
        Intent i = new Intent(this, target);
        ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView1, "image1");
        startActivity(i, transitionActivityOptions.toBundle());
    }

activity4:

public class Main4Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);
        Slide slideTransition = new Slide(Gravity.LEFT);
        slideTransition.setDuration(500);
        Fragment1 fragment1 = Fragment1.newInstance();

        fragment1.setReenterTransition(slideTransition);
        fragment1.setExitTransition(slideTransition);
        //共享元素動(dòng)畫設(shè)置
        fragment1.setSharedElementEnterTransition(new ChangeBounds());
        getSupportFragmentManager().beginTransaction().replace(R.id.fragment, fragment1)
                .commit();
    }

fragment1：

    private void addNextFragment() {
        Fragment2 fragment2 = Fragment2.newInstance();

        Slide slideTransition = new Slide(Gravity.RIGHT);
        slideTransition.setDuration(500);

        ChangeBounds changeBoundsTransition = new ChangeBounds();
        changeBoundsTransition.setDuration(500);
        
        fragment2.setEnterTransition(slideTransition);
        fragment2.setSharedElementEnterTransition(changeBoundsTransition);

        getFragmentManager().beginTransaction().replace(R.id.fragment, fragment2)
                .addToBackStack(null)
                .addSharedElement(mImageView,"image1")
                .commit();
    }

fragment2：

我什么都寫！

最終效果圖?。。。?/p>

GIF.gif

在真實(shí)項(xiàng)目當(dāng)中，共享ImageView使用 Glide 讀取同一個(gè)url，會(huì)導(dǎo)致內(nèi)存不斷的往上升，Share Elements 和 Glide 配合使用內(nèi)存問題,都是英文一大串，看不懂沒事，我已經(jīng)實(shí)踐過了，Glide 讀取圖片跳過緩存就可以了.skipMemoryCache(true)，神坑

共享元素轉(zhuǎn)場貌似還是Fragment里面處理的比較好，絲滑般感受

參考：深入理解共享元素變換
分享即美德 源碼點(diǎn)我

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容