Android中Transition实现

动机

在微信中点开一个图片，感觉好像是从小图片直接放大到全屏的，感觉像是在一个Activity或者 Fragment里面的，但其实不然，是重新打开了一个Activity或者 Fragment只是在新打开的Activity或者 Fragment将图片进行Transition变化（旧Activity或者 Fragment会把图片的位置给新的Activity或者 Fragment，这样看起来就是哪个特效了）

Transition概述

Lollipop 中Activity和 Fragment的过渡动画是基于 Android一个叫作 Transition 的新特性实现的。 初次引入这个特性是在 KitKat 中，Transition 框架提供了一个方便的 API 来构建应用中不同 UI 状态切换时的动画。 这个框架始终围绕两个关键概念:场景和过渡。

• 场景 描述应用中 UI 的状态，
• 过渡 确定两个场景转换之间的过渡动画。

当场景转换，Transition 的主要职责是：

• 捕获每一个 View 的起始和结束状态
• 根据这些数据来创建从一个场景到另一个场景间的过渡动画。

Transition运用

首先定义一个Layout 文件

R.layout.activity_main<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/mainLayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <Button        android:id="@+id/show"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Show" />    <Button        android:id="@+id/hide"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hide" />    <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="TextView"        android:textSize="30sp"        android:visibility="gone" /></LinearLayout>

基本用法:

package wqh.learn;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.transition.TransitionManager;import android.view.View;import android.view.ViewGroup;import static android.transition.Fade.IN;import static android.transition.Fade.OUT;public class MainActivity extends AppCompatActivity {    private ViewGroup mRootView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mRootView = (ViewGroup) findViewById(R.id.mainLayout);        findViewById(R.id.show).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                TransitionManager.beginDelayedTransition(mRootView, new Fade(IN).setDuration(5000));                findViewById(R.id.textView).setVisibility(View.VISIBLE);            }        });        findViewById(R.id.hide).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                TransitionManager.beginDelayedTransition(mRootView, new Fade(OUT).setDuration(5000));                findViewById(R.id.textView).setVisibility(View.GONE);            }        });    }}

进行改进，将transition定义添加XML文件之后:

package wqh.learn;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.transition.TransitionInflater;import android.transition.TransitionManager;import android.view.View;import android.view.ViewGroup;public class MainActivity extends AppCompatActivity {    private ViewGroup mRootView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mRootView = (ViewGroup) findViewById(R.id.mainLayout);        findViewById(R.id.show).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                TransitionManager.beginDelayedTransition(mRootView, TransitionInflater.from(MainActivity.this).inflateTransition(R.transition.show));                findViewById(R.id.textView).setVisibility(View.VISIBLE);            }        });        findViewById(R.id.hide).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                TransitionManager.beginDelayedTransition(mRootView, TransitionInflater.from(MainActivity.this).inflateTransition(R.transition.hide));                findViewById(R.id.textView).setVisibility(View.GONE);            }        });    }}

其XML文件如下:

R.transition.hide.xml<?xml version="1.0" encoding="utf-8"?><transitionSet xmlns:android="http://schemas.android.com/apk/res/android">    <fade        android:duration="5000"        android:fadingMode="fade_out" /></transitionSet>

R.transition.show.xml<?xml version="1.0" encoding="utf-8"?><transitionSet xmlns:android="http://schemas.android.com/apk/res/android">    <fade        android:duration="5000"        android:fadingMode="fade_in" /></transitionSet>

上述的运行就是：

• 点击show按钮，5秒之内显示文字
• 点击hide按钮，5秒之内消失文字

实例

使用CircularReveal动画效果切换页面

联系我

本人软件工程大三本科生，若是有错误，请赐教。
QQ: 1906362072

Mail : [e-mail]