Activity轉(zhuǎn)場動畫的學(xué)習(xí)

前言

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

參考文章：

1.傳統(tǒng)轉(zhuǎn)場動畫

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

效果圖

  • 動畫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)場動畫

Android 5.0新的轉(zhuǎn)場動畫有四種，Explode、Slide、Fade、Share。
效果圖：


效果圖

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

// 跳轉(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后面還要再傳一個參數(shù)bundle，固定寫法ActivityOptions.makeSceneTransitionAnimation(this).toBundle()，下一個Activity根據(jù)這個就能識別出使用5.0新轉(zhuǎn)場動畫。

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

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

// 跳轉(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就是下一個頁面元素漸變出現(xiàn)，最終形成完整的頁面。代碼如下：

// 跳轉(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即可，只不過這里最好同時(shí)設(shè)置Enter和Exit。

（4）Share
Share是最復(fù)雜的一種轉(zhuǎn)場方式，在跳轉(zhuǎn)的兩個Activity之間，如果有相同的View元素，那么，兩個元素就可以設(shè)置成共享狀態(tài)，在跳轉(zhuǎn)時(shí)，這個View就會從第一個Activity的顯示狀態(tài)過渡到第二個Activity的顯示狀態(tài)，給用戶的感覺仿佛是兩個Activity共享一個View。

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


效果圖

前后兩個Activity都有兩個共同的元素，一個機(jī)器人Logo，一個Android文字，但是他們在兩個Activity中的位置、大小都不一樣，于是，在兩個Activity跳轉(zhuǎn)過程中，位置、大小會自動有一個漸變的過程，從第一個Activity的狀態(tài)漸變到第二個Activity的狀態(tài)，從而給人一種兩個Activity共享元素的感覺。

代碼如下：

<!-- 首先，兩個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í)，要為每一個共享的view設(shè)置對應(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方法中開啟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)場的經(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 說啥捏？"));
        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 說啥捏？"));
        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 說啥捏？"));
        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 說啥捏？"));
        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);
        //啟動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="社會主義核心價(jià)值觀是社會主義核心價(jià)值體系的內(nèi)核，體現(xiàn)社會主義核心價(jià)值體系的根本性質(zhì)和基本特征，反映社會主義核心價(jià)值體系的豐富內(nèi)涵和實(shí)踐要求，是社會主義核心價(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);
    }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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