高逼格Android轉場動畫

2021-02-07 Android編程精選
轉場動畫在交互上非常有優勢，本文從轉場動畫的使用場景和方法起，最後是實現掘金中用戶頭像的轉場動畫。轉場動畫適用的版本Activity transition APIs 只有在Android 5.0（API 21）或者更高的版本上能使用。所以在使用之前需要進行版本判斷。當版本API 大於21時使用轉場動畫，否則不使用。

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    
} else {
    
}

還需要配置允許window content transitions 。也就是欄位：android:windowActivityTransitions。可以在activity的style文件中進行如下配置。

<style name="BaseAppTheme" parent="android:Theme.Material">
  
  <item name="android:windowActivityTransitions">true</item>
</style>

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

轉場動畫的使用場景1、在兩個activity之間切換時界面的過渡效果。2、兩個activity或者Fragment之間shared elements 切換效果。3、同一個activity中的view的動畫效果。
下面分別詳細的介紹這三種方式。1、兩個activity之間切換時界面的過渡效果兩個activity切換時的，有兩個動畫，如下圖，從activity A 切換到activity B時，會有A的退出動畫和B的進入動畫。Window.setEnterTransition() 設置進場動畫Window.setExitTransition() 設置出場動畫Window().setReturnTransition() 設置返回activity時動畫Window().setReenterTransition()  設置重新進入時動畫
如下圖：在Google提供的android.transition.Transition包中從activity A切換到activity B有三種方式：Explode, Slide 和Fade。
1、Explode：從屏幕的中間進入或退出。
2、Slide：從屏幕的一邊向另一邊進入或退出。
3、Fade：通過改變透明度來出現或消失。上面的三種動畫有兩種實現方式：
1、通過xml聲明。
在res目錄下新建transition文件夾在transition文件夾下新建activity_fade.xml文件。
res/transition/activity_fade.xml

<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="1000"/>

res/transition/activity_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="1000"/>

ActivityA的代碼如下：因為從ActivityA切換到ActivityB,所以ActivityA是退出動畫使用的方法是：getWindow().setExitTransition(slide);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide);
        getWindow().setExitTransition(slide);
    }

ActivityB是進入動畫使用方法：getWindow().setEnterTransition(fade);，ActivityB的代碼如下

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);
        getWindow().setEnterTransition(fade);
    }

2、代碼方式實現。
ActivityA代碼如下：實現一個Slide對象並且設置時間為1000毫秒。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setExitTransition(slide);
    }

ActivityB中實現一個Fide對象並且設置時間為1000毫秒。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
    }

上面的動畫過程分析：
1、Activity A 啟動Activity B
2、Transition FrameWork層得到Activity A的退出動畫slide並且應用到全部可見的view中。
3、Transition FrameWork層得到Activity B的進入動畫fade並且應用到全部可見的view中。
4、當從Activity B返回到Activity A的時候會分別執行Enter和Exit相反的動畫（沒有設置returnTransition，和reenterTransition時）。ReturnTransition & ReenterTransition
Return 和Reenter Transition是enter 和exit相反的過程。當從Activity A進入到Activity B時會執行 exit和enter當從Activity B退回到Activity A時會執行Return Transition和Reenter Transition。EnterTransition <--> ReturnTransitionExitTransition <--> ReenterTransition
如果沒有定義Return 或者 Reenter，那麼Android會反向執行Enter和Exit變換。如下圖從Activity B退回到Activity A：給Activity A增加了ReturnTransition的代碼如下：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);

        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setReturnTransition(slide);        
    }



2、 Shared elements between ActivitiesShared elements轉換確定兩個Activity之間共享的視圖如何在這兩個Activity之間轉換。例如，如果兩個Activity在不同的位置和大小中具有相同的圖像，則通過Shared elements轉換會在這兩個Activity之間平滑地轉換和縮放圖像。
主要方法如下圖，當從Activity A跳轉到Activity B時，ActivityA， ActivityB中的兩個item有動畫變化，但是要注意的時ActivityA ，ActivityB中的item是兩個獨立的item。changeBounds  改變目標布局中view的邊界changeClipBounds  裁剪目標布局中view的邊界changeTransform  實現旋轉或者縮放動畫changeImageTransform  實現目標布局中ImageView的旋轉或者縮放動畫實現上面的效果需要三個步驟：
1、 Enable Window Content Transition
設置styles.xml文件，允許windowContentTransitions如下：
value/style.xml

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowContentTransitions">true</item
    ...
</style>

2、定義一個相同的transition名稱
分別在Activity A 和Activity B的布局文件中定義item，這兩個item的屬性可以不一樣，但是android:transitionName必須一樣。如下：
layout/activity_a.xml

<ImageView
        android:id="@+id/small_blue_icon"
        style="@style/MaterialAnimations.Icon.Small"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

<ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

3、在activity中啟動shared element
使用ActivityOptions.makeSceneTransitionAnimation()方法
ActivityA.java

blueIconImageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent i = new Intent(MainActivity.this, SharedElementActivity.class);

        View sharedView = blueIconImageView;
        String transitionName = getString(R.string.blue_name);

        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
        startActivity(i, transitionActivityOptions.toBundle());
    }
});

Start an activity with multiple shared elements

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

Fragment之間Shared elementsFragment之間的Shared elements的使用過程和Activity之間的類似，分為三個步驟：
1、允許windowContentTransitions

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowContentTransitions">true</item>
    ...
</style>

<ImageView
        android:id="@+id/small_blue_icon"
        style="@style/MaterialAnimations.Icon.Small"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

<ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

FragmentB fragmentB = FragmentB.newInstance(sample);

// Defines enter transition for all fragment views
Slide slideTransition = new Slide(Gravity.RIGHT);
slideTransition.setDuration(1000);
sharedElementFragment2.setEnterTransition(slideTransition);

// Defines enter transition only for shared element
ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds);
fragmentB.setSharedElementEnterTransition(changeBoundsTransition);

getFragmentManager().beginTransaction()
        .replace(R.id.content, fragmentB)
        .addSharedElement(blueView, getString(R.string.blue_name))
        .commit();

設置是否允許動畫重疊
可以通過設置setAllowEnterTransitionOverlap(overlap);中的overlap的值為true或者false來允許或者不允許進場動畫和出場動畫重疊。

FragmentB fragmentB = FragmentB.newInstance(sample);

// Defines enter transition for all fragment views
Slide slideTransition = new Slide(Gravity.RIGHT);
slideTransition.setDuration(1000);
sharedElementFragment2.setEnterTransition(slideTransition);

// Defines enter transition only for shared element
ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds);
fragmentB.setSharedElementEnterTransition(changeBoundsTransition);

// Prevent transitions for overlapping
fragmentB.setAllowEnterTransitionOverlap(overlap);
fragmentB.setAllowReturnTransitionOverlap(overlap);

getFragmentManager().beginTransaction()
        .replace(R.id.content, fragmentB)
        .addSharedElement(blueView, getString(R.string.blue_name))
        .commit();

相關焦點

  • 如何實現高逼格轉場動畫?
    點擊上方「劉望舒」，馬上關注，每天早上8:42準時推送作者: IDhankinghttps://www.jianshu.com/p/31434ec06073前言轉場動畫在交互上非常有優勢，本文從轉場動畫的使用場景和方法起，最後是實現掘金中用戶頭像的轉場動畫。
  • Android 轉場動畫
    聲明轉載自：顏家大少原文連結：https://juejin.im/post/5b0e8554f265da08ed7a15d1轉載已獲得作者授權，如需轉載請聯繫原作者轉場動畫: 是Android L 引入的動畫效果, 可以說是api19引入的場景(Scene)動畫的擴展. 使開發者更加方便的實現布局(界面)變化時候的過渡動畫.
  • Android 中的轉場動畫及兼容處理
    然而，在 Android 5.0 以後，轉場效果更加炫酷。 比如下面的動畫：本篇文章，主要就是解說如何實現上述的效果。主要內容包括：實現轉場動畫只需三步：在 res/ 目錄下創建 transition 文件夾，在該文件夾下定義界面轉場動畫和共享元素的動畫。
  • Android 有近10種動畫,你都知道嗎?
    可能有很多人迅速的反應出，缺少了目前使用也相對較多的 airbnb/lottie-android 動畫。不可置疑，Lottie 庫目前在 Android 開發中尤其複雜動畫效果上地位顯著。但我們今天要是的 Android 原生上為我們提供的能使用的動畫方式，Lottie 動畫今天暫且擱置。同時對於 RecyclerView item 加載動畫今天也暫且不提。
  • Android到底有多少種動畫?準確告訴你
    Android 動畫可以歸納為以下幾種：視圖動畫（View 動畫）幀動畫（Frame 動畫、Drawable 動畫）屬性動畫觸摸反饋動畫（Ripple Effect）揭露動畫（Reveal Effect）轉場動畫 & 共享元素（Activity 切換動畫）視圖狀態動畫（Animate
  • Android View 動畫
    --android:delay="0.5" 子View動畫顯示的延遲時間比例-->    <!--比如動畫執行時間是300ms，延遲比例是0.5，那麼延遲時間就是150ms-->    <!--android:animationOrder="normal" 表示動畫執行的順序類型，共有三種-->    <!
  • Android之屬性動畫Animator
    Android 3.0之前已有動畫框架Animation（詳見：Android之視圖動畫Animation），但存在一些局限性，當某個元素發生視圖動畫後，其響應事件位置還在動畫前的地方。於是3.0之後，Google提出了屬性動畫。
  • Android自定義View-視圖動畫
    ="50%" * android:repeatCount="infinite" * android:repeatMode="reverse" * android:toXScale="0.5" * android:toYScale="0.5"> * </scale> *  * 完成一次動畫的持續時間，單位毫秒 * 動畫結束後
  • Android動畫:這些補間動畫的使用你必須要了解!
    基礎使用場景補間動畫的標準動畫分為4種：1. 平移動畫（Translate）2. 縮放動畫（scale）3. 旋轉動畫（rotate）4.         android:fromXDelta="0"     android:toXDelta="500"     android:fromYDelta="0"     android:toYDelta="500"     /> 步驟3：在Java代碼中創建Animation對象並播放動畫
  • Android幀動畫和補間動畫看這篇足夠了
    在 Android 中常用的動畫分類無外乎三種，最早的 幀動畫 、補間動畫，以及 3.0 之後加入的 屬性動畫，是它們組成了 Android 中各種炫酷亮眼的動畫效果。關於動畫相關的博文說實話很多，但是為什麼要寫這篇文章呢？
  • Android 屬性動畫詳解,屬性動畫基本用法
    android:duration:表示動畫播放的時長android:valueFrom:動畫屬性開始的值；取值範圍為float,int和color，如果未指定，動畫開始屬性通過屬性的get方法獲得。顏色用6位16進位數表示(例如：#333333)android:valueTo：動畫結束值；取值範圍同valueFromandroid:startOffset：取值範圍為int,動畫的start方法被調用後，延遲多少毫秒執行。
  • 不懂AE,如何做出高逼格的PPT動畫
    可能大家對MG動畫不會太陌生，像我們平時看到很多公益宣傳廣告、一些理財宣傳短片都很喜歡用MG動畫去製作，如果大家對MG動畫還是比較一頭霧水的，可以看看下面我在今年寒假做的簡單MG動畫感受一下：這個在PPT動畫大觸眼裡只是肥腸簡單的MG動畫，但相信只要你掌握了裡面的精髓（尤其轉場動畫），你也可以做出驚豔別人眼球的動畫哦！
  • 做動畫廣告怎麼轉場才酷炫?
    這一期，我們分享一下作者陳威元，對這家動畫工作室的轉場技法總結吧！陳威元，臺北藝術大學動畫系畢業，畢業作品《水巨人》精緻動感，相當有個人特色。長年與同學詹凱勳投入臺灣動畫盃的短宣創作，也是每年值得期待的精採短篇。目前在大貓動畫工作室擔任手繪動畫師。
  • 用轉場動畫彌補PPT切換效果的不足
    如果我們經常看一些很酷的全動畫PPT作品，就會發現，一些頁面之間的切換效果與PPT自帶的切換效果並不相同，它們就是動畫大師們所設計的轉場動畫，作為普通的PPT設計者或愛好者，我們無需去設計轉場動畫，但是可以搞懂這些轉場動畫的原理並學會運用。
  • 轉場動畫,讓你的PPT演示更有衝擊力
    人物當然是很帥氣的，除此之外….轉場動畫也功不可沒哦！轉場動畫是什麼呢？轉場相當於兩個不同的場景之間的鏡頭，可以讓場景順利過渡。而轉場動畫則是利用不同顏色的同一形狀，藉助動畫播放的延遲，產生視覺的衝擊感。為什麼要用轉場動畫呢？轉場動畫會給你的演示帶來很多變化和樂趣。使用轉場動畫，會讓你的演示更有衝擊力，關鍵是製作很方便，三步就能搞定。
  • 你認為後宮動畫需要高逼格的劇情麼?
    說起後宮賣肉動畫，可能大部分人的第一反應是輕小說改編動畫，或者少年漫畫改編動畫，這些充滿活力四射少女的作品總是能在播出後受到大量死宅歡迎，精美的人物原設也為動畫播出後的周邊銷路提供便利
  • 大氣轉場低音節奏感氣氛渲染無損音效合集 讓你的作品更有逼格!
    鏡頭之間如何實現合理的轉場這個是每一位剪輯師都非常頭疼的問題轉場是視頻製作必不可少的環節好的轉場音效可以讓你的轉場更有節奏感從使你的作品到達一個新的高度阿呆給大家帶了超級震撼的轉場音效套裝讓你的作品更有逼格！
  • 轉場動畫——一分鐘讓你的PPT高大上
    想我以前在初涉較為高級的PPT動畫時，就是從學做轉場動畫開始的。什麼是轉場動畫呢，說白了，轉場動畫跟PPT中的切換所起的作用是一樣的，就是從一個畫面轉到另一個畫面的時候，這中間的過渡。後臺回覆：轉場，下載動畫源文件。
  • Android屬性動畫:這是一份全面 & 詳細的核心使用類ObjectAnimator學習攻略
    /set_animation.xmlset_animation.xml// ObjectAnimator 採用<animator> 標籤<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:valueFrom
  • 大氣轉場低音節奏感氣氛渲染無損音效合集 讓你的作品更有逼格!
    多半是節奏沒有把握好而且問題很有可能就是出在了背景音樂和音效的選擇上為了幫助小夥伴們創作出更優質的內容本期菌菌為小夥伴帶來了 超級給力的轉場音效背景音樂套裝 讓你的作品更有逼格！▼ 大氣轉場撞擊重低音氣氛無損音效 第1季 ▼