前言

學(xué)習(xí)完大神Carson_Ho關(guān)于動(dòng)畫(huà)的一系列文章后，這篇文章是我自己結(jié)合一些文章總結(jié)的關(guān)于Android 5.0的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

參考文章：

• Android高級(jí)動(dòng)畫(huà)（1）
• Android轉(zhuǎn)場(chǎng)動(dòng)畫(huà)深度解析（1）

1.傳統(tǒng)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

該部分在文章Android補(bǔ)間動(dòng)畫(huà)的學(xué)習(xí)中也有闡述。
效果圖：

效果圖

• 動(dòng)畫(huà)xml文件的準(zhǔn)備

slide_right_in.xml

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

    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration = "500"
        />

</set>

slide_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:fromXDelta="0%"
    android:toXDelta="-40%"
    android:duration = "500"
    />
</set>

slide_left_in.xml

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

    <translate
        android:fromXDelta="-100%"
        android:toXDelta="0%"
        android:duration="500"
        />
</set>

slide_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:duration = "500"
        />
</set>

• 在activity中使用

ActivityA的代碼

startActivity(new Intent(TransitionsActivity.this,TraditionalActivity.class));
overridePendingTransition(R.anim.slide_right_in,R.anim.slide_left_out);

ActivityB的代碼

finish();
overridePendingTransition(R.anim.slide_left_in, R.anim.slide_right_out);

2. Android 5.0新的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

Android 5.0新的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)有四種纸型，Explode银锻、Slide、Fade滚躯、Share。
效果圖：

效果圖

（1）Explode
Explode的效果是下一個(gè)頁(yè)面的元素從四面八方進(jìn)入嘿歌，最終形成完整的頁(yè)面掸掏。代碼如下：

// 跳轉(zhuǎn)
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳轉(zhuǎn)的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Explode());
        setContentView(R.layout.activity_c);
    }
}

在跳轉(zhuǎn)時(shí)需要注意的點(diǎn)是：intent后面還要再傳一個(gè)參數(shù)bundle，固定寫(xiě)法ActivityOptions.makeSceneTransitionAnimation(this).toBundle()搅幅，下一個(gè)Activity根據(jù)這個(gè)就能識(shí)別出使用5.0新轉(zhuǎn)場(chǎng)動(dòng)畫(huà)阅束。

跳轉(zhuǎn)的Activity在onCreate方法中，調(diào)用getWindow().setEnterTransition(new Explode())即可茄唐，必須在setContentView之前調(diào)用息裸。

（2）Slide
Slide就是下一個(gè)頁(yè)面元素從底部一次向上運(yùn)動(dòng)，最終形成完整的頁(yè)面沪编。代碼如下：

// 跳轉(zhuǎn)
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳轉(zhuǎn)的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Slide());
        setContentView(R.layout.activity_c);
    }
}

與Explode唯一的區(qū)別就是在跳轉(zhuǎn)的Activiy的onCreate方法中設(shè)置transition為Slide即可呼盆。

（3）Fade
Fade就是下一個(gè)頁(yè)面元素漸變出現(xiàn)，最終形成完整的頁(yè)面蚁廓。代碼如下：

// 跳轉(zhuǎn)
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳轉(zhuǎn)的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Fade());
        getWindow().setExitTransition(new Fade());
        setContentView(R.layout.activity_c);
    }
}

同樣访圃，就是跳轉(zhuǎn)的Activity在onCreate方法中設(shè)置transition為Fade即可，只不過(guò)這里最好同時(shí)設(shè)置Enter和Exit相嵌。

（4）Share
Share是最復(fù)雜的一種轉(zhuǎn)場(chǎng)方式腿时，在跳轉(zhuǎn)的兩個(gè)Activity之間况脆，如果有相同的View元素，那么批糟，兩個(gè)元素就可以設(shè)置成共享狀態(tài)格了，在跳轉(zhuǎn)時(shí)，這個(gè)View就會(huì)從第一個(gè)Activity的顯示狀態(tài)過(guò)渡到第二個(gè)Activity的顯示狀態(tài)徽鼎，給用戶(hù)的感覺(jué)仿佛是兩個(gè)Activity共享一個(gè)View盛末。

下面是share的單獨(dú)效果圖：

效果圖

前后兩個(gè)Activity都有兩個(gè)共同的元素，一個(gè)機(jī)器人Logo否淤，一個(gè)Android文字悄但，但是他們?cè)趦蓚€(gè)Activity中的位置、大小都不一樣石抡，于是檐嚣，在兩個(gè)Activity跳轉(zhuǎn)過(guò)程中，位置汁雷、大小會(huì)自動(dòng)有一個(gè)漸變的過(guò)程净嘀，從第一個(gè)Activity的狀態(tài)漸變到第二個(gè)Activity的狀態(tài)，從而給人一種兩個(gè)Activity共享元素的感覺(jué)侠讯。

代碼如下：

<!-- 首先，兩個(gè)Activity共享的元素需要設(shè)置相同的transitionName： android:transitionName="fab" -->
<Button
     android:id="@+id/fab_button"
     android:layout_width="56dp"
     android:layout_height="56dp"
     android:background="@mipmap/ic_launcher"
     android:elevation="5dp"
     android:onClick="explode"
     android:transitionName="fab" />

<Button
     android:id="@+id/fab_button"
     android:layout_width="160dp"
     android:layout_height="160dp"
     android:layout_alignParentEnd="true"
     android:layout_below="@id/holder_view"
     android:layout_marginTop="-80dp"
     android:background="@mipmap/ic_launcher"
     android:elevation="5dp"
     android:transitionName="fab" />

// 跳轉(zhuǎn)時(shí)暑刃，要為每一個(gè)共享的view設(shè)置對(duì)應(yīng)的transitionName
View fab = findViewById(R.id.fab_button);
View txName = findViewById(R.id.tx_user_name);
intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view, "share"),
        Pair.create(fab, "fab"),
        Pair.create(txName, "user_name"))
        .toBundle());

// 跳轉(zhuǎn)的Activity在onCreate方法中開(kāi)啟Transition模式
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.activity_c);
    }
}

（5）Share轉(zhuǎn)場(chǎng)的經(jīng)典例子
效果圖：

效果圖

• 用到的布局文件

activity_typical.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context="com.gjj.androidstudydemo.activity.TypicalActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

rv_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingBottom="12dp">

    <ImageView
        android:id="@+id/head_image"
        android:layout_width="86dp"
        android:layout_height="86dp"
        android:scaleType="centerCrop"
        android:transitionName="headImage"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_marginLeft="16dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textStyle="bold"
            android:textColor="#383838"
            android:layout_marginTop="6dp"
            android:transitionName="name"/>

        <TextView
            android:id="@+id/desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="#808080"
            android:layout_marginTop="12dp"
            android:transitionName="desc"/>
    </LinearLayout>
</LinearLayout>

• Activity的代碼

package com.gjj.androidstudydemo.activity;

import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Pair;
import android.view.View;

import com.gjj.androidstudydemo.R;
import com.gjj.androidstudydemo.adapter.RVAdapter;
import com.gjj.androidstudydemo.bean.RVBean;

import java.util.ArrayList;

import butterknife.BindView;
import butterknife.ButterKnife;

public class TypicalActivity extends AppCompatActivity implements RVAdapter.RVClickListener {


    @BindView(R.id.rv)
    RecyclerView mRv;
    private ArrayList<RVBean> beans;
    private RVAdapter mRVAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_typical);
        ButterKnife.bind(this);
        setTitle("典型應(yīng)用");
        init();
    }

    /**
     * 初始化控件和數(shù)據(jù)
     */
    private void init() {
        mRv.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));

        beans = new ArrayList<>();
        beans.add(new RVBean("談笑馮生", R.mipmap.head_image_01, "低調(diào)奢華有內(nèi)涵"));
        beans.add(new RVBean("高鵬展翅", R.mipmap.head_image_02, "桌游傳奇小王子"));
        beans.add(new RVBean("珉而好學(xué)", R.mipmap.head_image_03, "套路王"));
        beans.add(new RVBean("汰漬洗衣粉厢漩，加亮不加價(jià)", R.mipmap.head_image_04, "What are you 說(shuō)啥捏？"));
        beans.add(new RVBean("尼古拉斯.趙政", R.mipmap.head_image_05, "亞洲舞王不解釋"));

        beans.add(new RVBean("談笑馮生", R.mipmap.head_image_06, "低調(diào)奢華有內(nèi)涵"));
        beans.add(new RVBean("高鵬展翅", R.mipmap.head_image_07, "桌游傳奇小王子"));
        beans.add(new RVBean("珉而好學(xué)", R.mipmap.head_image_08, "套路王"));
        beans.add(new RVBean("汰漬洗衣粉岩臣，加亮不加價(jià)", R.mipmap.head_image_09, "What are you 說(shuō)啥捏溜嗜？"));
        beans.add(new RVBean("尼古拉斯.趙政", R.mipmap.head_image_10, "亞洲舞王不解釋"));

        beans.add(new RVBean("談笑馮生", R.mipmap.head_image_11, "低調(diào)奢華有內(nèi)涵"));
        beans.add(new RVBean("高鵬展翅", R.mipmap.head_image_12, "桌游傳奇小王子"));
        beans.add(new RVBean("珉而好學(xué)", R.mipmap.head_image_13, "套路王"));
        beans.add(new RVBean("汰漬洗衣粉，加亮不加價(jià)", R.mipmap.head_image_14, "What are you 說(shuō)啥捏架谎？"));
        beans.add(new RVBean("尼古拉斯.趙政", R.mipmap.head_image_15, "亞洲舞王不解釋"));

        beans.add(new RVBean("談笑馮生", R.mipmap.head_image_16, "低調(diào)奢華有內(nèi)涵"));
        beans.add(new RVBean("高鵬展翅", R.mipmap.head_image_17, "桌游傳奇小王子"));
        beans.add(new RVBean("珉而好學(xué)", R.mipmap.head_image_18, "套路王"));
        beans.add(new RVBean("汰漬洗衣粉炸宵，加亮不加價(jià)", R.mipmap.head_image_19, "What are you 說(shuō)啥捏？"));
        beans.add(new RVBean("尼古拉斯.趙政", R.mipmap.head_image_20, "亞洲舞王不解釋"));

        mRVAdapter = new RVAdapter(beans,this);
        mRv.setAdapter(mRVAdapter);
        mRVAdapter.setListener(this);
    }

    /**
     * 條目的點(diǎn)擊事件
     * @param position
     */
    @Override
    public void onItemClick(int position) {
        RVBean bean = beans.get(position);

        Intent intent = new Intent(TypicalActivity.this, TypicalDetailActivity.class);
        intent.putExtra("resId",bean.getResId());
        intent.putExtra("name",bean.getName());
        intent.putExtra("desc",bean.getDesc());

        /**
         * 獲取到點(diǎn)擊條目的view
         */
        int firstVisiblePosition = ((LinearLayoutManager)mRv.getLayoutManager()).findFirstVisibleItemPosition();

        View itemView = mRv.getChildAt(position - firstVisiblePosition);
        View headImage = itemView.findViewById(R.id.head_image);
        View name = itemView.findViewById(R.id.name);
        View desc = itemView.findViewById(R.id.desc);
        //啟動(dòng)activity時(shí)谷扣，使用共享元素
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
                Pair.create(headImage,"headImage"),
                Pair.create(name,"name"),
                Pair.create(desc,"desc")).toBundle());
    }
}

• 跳轉(zhuǎn)后Activity的布局文件

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

    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:scaleType="centerCrop"
        android:transitionName="headImage"/>

    <TextView
        android:id="@+id/tx_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="28sp"
        android:textColor="#383838"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:transitionName="name"/>

    <TextView
        android:id="@+id/tx_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textColor="#808080"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:transitionName="desc"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#808080"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:text="社會(huì)主義核心價(jià)值觀(guān)是社會(huì)主義核心價(jià)值體系的內(nèi)核土全，體現(xiàn)社會(huì)主義核心價(jià)值體系的根本性質(zhì)和基本特征，反映社會(huì)主義核心價(jià)值體系的豐富內(nèi)涵和實(shí)踐要求会涎，是社會(huì)主義核心價(jià)值體系的高度凝練和集中表達(dá)裹匙。"/>
</LinearLayout>

• 跳轉(zhuǎn)后activity的代碼

package com.gjj.androidstudydemo.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.TextView;

import com.gjj.androidstudydemo.R;

import butterknife.BindView;
import butterknife.ButterKnife;

public class TypicalDetailActivity extends AppCompatActivity {

    @BindView(R.id.iv_head)
    ImageView mIvHead;
    @BindView(R.id.tx_name)
    TextView mTxName;
    @BindView(R.id.tx_desc)
    TextView mTxDesc;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_typical_detail);
        ButterKnife.bind(this);
        Intent intent = getIntent();
        String name = intent.getStringExtra("name");
        String desc = intent.getStringExtra("desc");
        int resId = intent.getIntExtra("resId", 0);
        mIvHead.setImageResource(resId);
        mTxName.setText(name);
        mTxDesc.setText(desc);
    }
}