高逼格Android轉場動畫

時間  2019-11-07
標籤 android 轉場 動畫 欄目 Android 简体版
原文   原文鏈接

前言

轉場動畫在交互上很是有優點，本文從轉場動畫的使用場景和方法起，最後是實現掘金中用戶頭像的轉場動畫。java

轉場動畫適用的版本

Activity transition APIs 只有在Android 5.0（API 21）或者更高的版本上能使用。因此在使用以前須要進行版本判斷。當版本API 大於21時使用轉場動畫，不然不使用。android

// Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition } 複製代碼

還須要配置容許window content transitions 。也就是字段：android:windowActivityTransitions。能夠在activity的style文件中進行以下配置。bash

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>
</style>
複製代碼

也能夠在代碼中動態的配置以下：app

// 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());
複製代碼

轉場動畫的使用場景

Android中的轉場動畫主要有三種場景： 一、在兩個activity之間切換時界面的過渡效果。ide

二、兩個activity或者Fragment之間shared elements 切換效果。佈局

三、同一個activity中的view的動畫效果。 下面分別詳細的介紹這三種方式。動畫

一、兩個activity之間切換時界面的過渡效果

兩個activity切換時的，有兩個動畫，以下圖，從activity A 切換到activity B時，會有A的退出動畫和B的進入動畫。ui

activity主要的進場和出場方法：

  • Window.setEnterTransition() 設置進場動畫this

  • Window.setExitTransition() 設置出場動畫spa

  • Window().setReturnTransition() 設置返回activity時動畫

  • Window().setReenterTransition() 設置從新進入時動畫 以下圖：

    在Google提供的android.transition.Transition包中從activity A切換到activity B有三種方式：Explode, Slide 和Fade。 一、Explode：從屏幕的中間進入或退出。 二、Slide：從屏幕的一邊向另外一邊進入或退出。 三、Fade：經過改變透明度來出現或消失。 效果以下圖所示：

    上面的三種動畫有兩種實現方式：

一、經過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);
    }
複製代碼
二、代碼方式實現。

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);
    }
複製代碼

上面兩種方式最終的實現效果以下：

上面的動畫過程分析： 一、Activity A 啓動Activity B 二、Transition FrameWork層獲得Activity A的退出動畫slide而且應用到所有可見的view中。 三、Transition FrameWork層獲得Activity B的進入動畫fade而且應用到所有可見的view中。 四、當從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 <--> ReturnTransition

  • ExitTransition <--> 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);        
    }
複製代碼

增長了返回動畫和沒有增長返回動畫的對比效果以下：

二、 Shared elements between Activities

Shared elements轉換肯定兩個Activity之間共享的視圖如何在這兩個Activity之間轉換。例如，若是兩個Activity在不一樣的位置和大小中具備相同的圖像，則經過Shared elements轉換會在這兩個Activity之間平滑地轉換和縮放圖像。

主要方法

以下圖，當從Activity A跳轉到Activity B時，ActivityA， ActivityB中的兩個item有動畫變化，可是要注意的時ActivityA ，ActivityB中的item是兩個獨立的item。

shared elements轉換包括如下幾種：
  • changeBounds 改變目標佈局中view的邊界
  • changeClipBounds 裁剪目標佈局中view的邊界
  • changeTransform 實現旋轉或者縮放動畫
  • changeImageTransform 實現目標佈局中ImageView的旋轉或者縮放動畫 實現上面的效果須要三個步驟：
一、 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>
複製代碼
二、定義一個相同的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" />
複製代碼

layout/activity_b.xml

<ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />
複製代碼
三、在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 elements Fragment之間的Shared elements的使用過程和Activity之間的相似，分爲三個步驟：

一、容許windowContentTransitions
<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowContentTransitions">true</item>
    ...
</style>
複製代碼
二、定義一個共同的變換名稱

layout/fragment_a.xml

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

layout/fragment_b.xml

<ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />
複製代碼
三、使用FragmentTransaction
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();
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程