Activity过渡动画(overridePendingtransition()的使用)

来源:互联网 发布:偷窥网络在线视频 编辑:程序博客网 时间:2024/06/10 18:28

之前Android中两个Activity之间的跳转主要通过overridePendingtransition(int inId , int outId)来实现 , 但是效果比较生硬 , 视觉效果不理想 . 从Android 5.X开始 , Google丰富了Activity的转场动画效果 .
Android 5.X提供了三种Transition类型:

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

    其中 , 进入和退出效果包括:
    ▷explode(分解)—-从屏幕中间进或出 , 移动视图
    ▷slide(滑动)—-从屏幕边缘进或出 , 移动视图
    ▷fade(淡出)—-通过改变屏幕上视图的不透明度达到添加或者移除视图

    共享元素包括:
    ☆changeBounds—-改变目标视图的布局边界
    ☆changeClipBounds—-裁剪目标视图边界
    ☆changeTransform—-改变目标视图的缩放比例和旋转角度
    ☆changeImageTransform—-改变目标图片的大小和缩放比例

现在开始实验 , 先从最普通的三种过渡动画开始 , 这些动画使用非常简单 , 例如从ActivityA跳转到ActivityB , 只需要在ActivityA中将基本的startActivity(intent)方法改为如下代码即可.

 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.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的布局文件中设置共享的元素 , 给它增加相应的属性 , 代码如下所示.

  android:transitionName="XXX"

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

  android:transitionName="XXX"

这里需要注意的是一定要保证命名相同 , 这样系统才能找到共享元素 .
如果只要一个共享元素 , 那么Acitivity1中只需要使用如下代码 .

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

如果有多个共享的元素 , 那么可以通过Pair.create()来传建多个共享元素 , 代码如下所示 .

  startActivity(intent,             ActivityOptions.makeSceneTransitionAnimation(                        this,                        //创建多个共享元素                        Pair.create(view, "share"),                        Pair.create(fab, "fab")).toBundle());

下面通过一个实例来演示Activity的过渡动画 , Activity1代码如下所示:

package com.lyx.penddingtransition;import android.app.ActivityOptions;import android.content.Intent;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.util.Pair;import android.view.View;public class MainActivity extends AppCompatActivity{    private Intent intent;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }    //设置不同的动画效果    public void explode(View view) {        intent = new Intent(this, SecondActivity.class);        intent.putExtra("flag", 0);        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    //设置不同的动画效果    public void slide(View view) {        intent = new Intent(this, SecondActivity.class);        intent.putExtra("flag", 1);        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    //设置不同的动画效果    public void fade(View view) {        intent = new Intent(this, SecondActivity.class);        intent.putExtra("flag", 2);        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    //设置不同的动画效果    public void share(View view) {        View fab = findViewById(R.id.fab_button);        intent = new Intent(this, SecondActivity.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());    }}

Activity1对应的XML代码如下所示:

<?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">    <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:layout_marginTop="10dp"        android:onClick="slide"        android:text="slide"/>    <Button        android:layout_width="match_parent"        android:layout_height="100dp"        android:layout_marginTop="10dp"        android:onClick="fade"        android:text="fade"/>    <Button        android:layout_width="match_parent"        android:layout_height="100dp"        android:layout_marginTop="10dp"        android:onClick="share"        android:text="share"        android:transitionName="share"/>    <Button        android:id="@+id/fab_button"        android:layout_width="56dp"        android:layout_height="56dp"        android:layout_marginTop="10dp"        android:background="@drawable/ripple_round"        android:elevation="5dp"        android:transitionName="fab"/></LinearLayout>

Activity2代码如下所示:

package com.lyx.penddingtransition;import android.os.Build;import android.os.Bundle;import android.support.annotation.RequiresApi;import android.support.v7.app.AppCompatActivity;import android.transition.Explode;import android.transition.Fade;import android.transition.Slide;import android.view.Window;public class SecondActivity extends AppCompatActivity {    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)    @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_second);    }}

其对应的XML如下所示:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_second"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.lyx.penddingtransition.SecondActivity">    <View        android:id="@+id/holder_view"        android:layout_width="match_parent"        android:layout_height="300dp"        android:background="#fadfda"        android:transitionName="share"/>    <Button        android:id="@+id/fab_button"        android:layout_width="56dp"        android:layout_height="56dp"        android:layout_alignParentEnd="true"        android:layout_below="@+id/holder_view"        android:layout_marginRight="20dp"        android:layout_marginTop="-26dp"        android:background="@drawable/ripple_round"        android:elevation="5dp"        android:transitionName="fab"/>    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@+id/holder_view"        android:paddingTop="100dp">        <Button            android:id="@+id/button"            android:layout_width="match_parent"            android:layout_height="60dp"            android:layout_below="@+id/button4"            android:layout_marginTop="10dp"/>        <Button            android:id="@+id/button4"            android:layout_width="match_parent"            android:layout_height="60dp"            android:layout_alignParentStart="true"            android:layout_marginTop="10dp"/>    </RelativeLayout></RelativeLayout>

效果如下图所示:
这里写图片描述

1 1