Android 5.X 新特性详解(三)Activity过渡动画

来源:互联网 发布:淘宝app开店 编辑:程序博客网 时间:2024/06/06 04:54

Activity过渡动画

曾经Android在Activity进行跳转的时候只是非常生硬的切换,即使通过噢verridePendingtransition(int inId,int outId)这个方法来给他Activity增加一些切换动画,效果也只是差强人意,在Android 5.X中Google为Activity的转场效果设计了更加丰富的动画效果。

Android 5.X 提供了三种Transition类型。

  • 进入:一个进入的过渡动画决定Activity中的所有视图怎么进入屏幕。
  • 退出:一个退出的过渡动画决定Activity中的所有视图怎么退出屏幕。
  • 共享元素:一个共享元素过渡动画决定两个Activities之间的过渡,怎么共享它们的视图。

其中,进入和退出效果包括:

  • explode(分解)——从屏幕中间进或出,移动视图
  • slide(滑动)——从屏幕边缘进或出,移动视图
  • fade(淡出)——通过改变屏幕上视图的不透明度达到添加或者移除视图

共享元素包括:

  • changeBounds——改变目标视图的布局边界
  • changeClipBounds——裁剪目标视图边界
  • changeTransform——改变目标视图的缩放比例和旋转角度
  • changeImageTransform——改变目标图片的大小和缩放比例

首先来看看普通的三种Activity过渡动画,例如从ActivityA跳转到ActivityB,只需要在ActivityA中将基本的startActivity(intent)方法改为如下代码即可。

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

而在ActivityB中,只需要设置如下所示代码。

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

或者在样式文件中设置如下代码。

<item name="android:windowContentTransitions">true</item>

接下来就可以设置进入ActivityB的具体的动画效果了,代码如下:

getWindow().setEnterTransition(new Explode());getWindow().setEnterTransition(new Slide());getWindow().setEnterTransition(new Fade());

或者通过如下代码设置离开ActivityB的动画效果。

getWindow().setExitTransition(new Explode());getWindow().setExitTransition(new Slide());getWindow().setExitTransition(new Fade());

共享元素即Activity1和Activity2都拥有的元素,在Activity1跳转到Activity2的时候,其他元素消失,而共享元素通过动画效果直接显示到Activity2中。

要想在程序中使用共享元素的动画效果也非常简单,首先在Activity1的布局文件中设置共享的元素,给它增加相应的属性,代码如下所示:

android:transitionName="XXX"

同时在Activity2的布局文件中,给要实现共享效果的元素也增加相同的属性,代码如下:

android:transitionName="XXX"

这里需要注意的是一定要保证命名相同,这样系统才能找到共享元素。

如果只要一个共享元素,那么在Activity1中只需要使用如下代码:

startActivity(intent,        ActivityOptions.makeSceneTransitionAnimation(this,view,"share").toBundle());

使用的参数就是在前面普通动画的基础上增加了共享的View和前面取的名字。
如果有多个共享元素,那么可以通过Pair.create()来创建多个共享元素,代码如下所示:

startActivity(intent,        ActivityOptions.makeSceneTransitionAnimation(                this,                Pair.create(view, "share"),                Pair.create(fab,"fab")).toBundle());

使用Activity的过渡动画的示例代码如下:

public class MainActivity extends Activity {    private Intent intent;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_transition);    }    // 设置不同动画效果    public void explode(View view) {        intent = new Intent(this, Transitions.class);        intent.putExtra("flag", 0);        startActivity(intent,                ActivityOptions.makeSceneTransitionAnimation(this)                        .toBundle());    }    // 设置不同动画效果    public void slide(View view) {        intent = new Intent(this, Transitions.class);        intent.putExtra("flag", 1);        startActivity(intent,                ActivityOptions.makeSceneTransitionAnimation(this)                        .toBundle());    }    // 设置不同动画效果    public void fade(View view) {        intent = new Intent(this, Transitions.class);        intent.putExtra("flag", 2);        startActivity(intent,                ActivityOptions.makeSceneTransitionAnimation(this)                        .toBundle());    }    // 设置不同动画效果    public void share(View view) {        View fab = findViewById(R.id.fab_button);        intent = new Intent(this, Transitions.class);        intent.putExtra("flag", 3);        // 创建单个共享元素//        startActivity(intent,//                ActivityOptions.makeSceneTransitionAnimation(//                        this, view, "share").toBundle());        startActivity(intent,                ActivityOptions.makeSceneTransitionAnimation(                        this,                        // 创建多个共享元素                        Pair.create(view, "share"),                        Pair.create(fab, "fab")).toBundle());    }}

XML代码如下所示:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:orientation="vertical"    android:layout_height="match_parent">    <Button        android:layout_width="match_parent"        android:layout_height="100dp"        android:onClick="explode"        android:text="explode" />    <Button        android:layout_width="match_parent"        android:layout_height="100dp"        android:onClick="slide"        android:text="slide" />    <Button        android:layout_width="match_parent"        android:layout_height="100dp"        android:onClick="fade"        android:text="fade" />    <Button        android:layout_width="match_parent"        android:layout_height="100dp"        android:transitionName="share"        android:onClick="share"        android:text="share" />    <Button        android:id="@+id/fab_button"        android:layout_width="56dp"        android:transitionName="fab"        android:layout_height="56dp"        android:background="@drawable/ripple_round"        android:elevation="5dp"/></LinearLayout>

ActivityB代码如下所示:

public class Transitions extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);        int flag = getIntent().getExtras().getInt("flag");        // 设置不同的动画效果        switch (flag) {            case 0:                getWindow().setEnterTransition(new Explode());                break;            case 1:                getWindow().setEnterTransition(new Slide());                break;            case 2:                getWindow().setEnterTransition(new Fade());                getWindow().setExitTransition(new Fade());                break;            case 3:                break;        }        setContentView(R.layout.activity_transition_to);    }}

XML代码如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:paddingBottom="@dimen/activity_vertical_margin">    <View        android:id="@+id/holder_view"        android:layout_width="match_parent"        android:layout_height="300dp"        android:transitionName="share"        android:background="?android:colorPrimary" />    <Button xmlns:android="http://schemas.android.com/apk/res/android"        android:id="@+id/fab_button"        android:transitionName="fab"        android:layout_width="56dp"        android:layout_height="56dp"        android:layout_marginRight="@dimen/activity_horizontal_margin"        android:background="@drawable/ripple_round"        android:elevation="5dp"        android:layout_below="@+id/holder_view"        android:layout_marginTop="-26dp"        android:layout_alignParentEnd="true" />    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:paddingTop="10dp"        android:layout_below="@id/holder_view">        <Button            android:layout_width="match_parent"            android:layout_height="60dp"            android:id="@+id/button"            android:layout_below="@+id/button4"            android:layout_marginTop="10dp" />        <Button            android:layout_width="match_parent"            android:layout_height="60dp"            android:layout_marginTop="10dp"            android:id="@+id/button4"            android:layout_alignParentStart="true" />    </RelativeLayout></RelativeLayout>

程序运行效果如下图所示:
这里写图片描述

代码下载