群英传之Android 5.X过渡动画

来源：互联网发布：sublime java高亮显示编辑：程序博客网时间：2024/05/07 14:19

Android 2.0之后可以通过overridePendingTransition()给Activity增加切换动画.而在Android5.X中，Google对动画效果进行了更深一步的诠释，为Activity的跳转设计了更加丰富的动画效果。

以下是效果图:

这里写图片描述
建议拖到 “效果图的具体实现代码”，将代码运行一遍，再重新看原理，速度就会快很多。

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

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

其中，进入效果和退出效果包括：

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

共享元素包括:

changeBounds ——改变目标视图的布局边界
changeClipBounds——裁剪目标视图边界
changeTransform——改变目标视图的缩放比例和旋转角度
changeImageTransform——改变目标图片的大小和缩放比例
以上元素属性配置时，系统会自动设置..

具体操作

首先先看进入与退出三种过渡动画##

例如从MainActivity跳转到Main2ActivityB，只需要在MainActivity中将基本的startActivity(intent)方法改成如下代码：

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

而在Main2Activity中，只需要设置如下所示代码:

 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);//这句要写在setContentView()前,具体原因到时再补充

或

  <!-- 允许使用transitions,放在主题Style里 -->        <item name="android:windowContentTransitions">true</item>

接下来就可以设置进入动画，在Main2Activity设置，代码如下：

//同样，都是要写在setContentView()前面 getWindow().setEnterTransition(new Explode()); getWindow().setEnterTransition(new Slide()); getWindow().setEnterTransition(new Fade());

退出动画设置为，代码如下：

//同样，都是要写在setContentView()前面 getWindow().setExitTransition(new Explode()); getWindow().setExitTransition(new Slide()); getWindow().setExitTransition(new Fade());

共享元素效果

第一章图片中的Android机器人就是共享元素，即Activity1与Activity2都拥有的元素，在Activity1跳转到Activity2的时候，其他元素消失，而共享元素——Android机器人通过动画效果直接显示到Activity2中。

这里写图片描述

所以，要想在程序中使用共享元素的动画效果，需要再Activity1的布局文件中设置共享元素，即给对应控件增加相关属性，代码如下：

 android:transitionName="XXX"<!--该值任意-->

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

 android:transitionName="XXX"<!--该值应与其相同,系统才能找到共享元素-->

如果只有一个共享元素，Activity1中只需要使用如下代码：

//view为共享元素，share为指定transitionName="XXX"对应的XXX startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, view,"share")).toBundle());

如果有多个共享属性，可以通过Pair.create()来创建多个共享元素，代码如下：

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

到这里所有的步骤就完成。

效果图的具体实现代码

“跳转按钮”是Android2.0使用overridePendingTransition()的实现，所以以下代码不会给出..

MainActivity代码如下：

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }    //如果报错就在每个方法前加上@TargetApi(Build.VERSION_CODES.LOLLIPOP)，主要是为了防止版本太低    public void explode(View v) {        Intent intent = new Intent(this, Main2Activity.class);        intent.putExtra("flag", 0);        startActivity(intent,                ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    public void slide(View v) {        Intent intent = new Intent(this, Main2Activity.class);        intent.putExtra("flag", 1);        startActivity(intent,                ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    public void fade(View view) {        Intent intent = new Intent(this, Main2Activity.class);        intent.putExtra("flag", 2);        startActivity(intent,                ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    public void share(View view) {        Toast.makeText(MainActivity.this, "aaaaa", Toast.LENGTH_SHORT).show();        View fab = findViewById(R.id.fab_button);        Intent intent = new Intent(this, Main2Activity.class);        intent.putExtra("flag", 3);        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, Pair.create(view,"share"),Pair.create(fab,"fab")).toBundle());    }}

MainActivity的Xml代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:orientation="vertical"    tools:context=".activitys.MainActivity">    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="explode"        android:onClick="explode"/>    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="slide"        android:onClick="slide"/>    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="fade"        android:onClick="fade"/>    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="share"        android:transitionName="share"<!--设置共享元素属性share-->        android:onClick="share"/>    <Button        android:id="@+id/fab_button"        android:layout_width="80dp"        android:layout_height="80dp"        android:background="@drawable/aaa"        android:transitionName="fab"<!--设置共享元素属性fab-->        android:elevation="5dp"        /></LinearLayout>

但其实在MainActivity的xml中，transitionName其实不设置代码也是没问题的，有兴趣可以去试试。因为在MainActivity的代码的ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, Pair.create(view,”share”),Pair.create(fab,”fab”)).toBundle())中，view与fab 其实就是那两个Button。

Main2Activity代码：

public class Main2Activity extends AppCompatActivity {    @TargetApi(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://explode                getWindow().setEnterTransition(new Explode());                getWindow().setExitTransition(new Explode());                break;            case 1://slide                getWindow().setEnterTransition(new Slide());                getWindow().setExitTransition(new Slide());                break;            case 2://fade                getWindow().setEnterTransition(new Fade());                getWindow().setExitTransition(new Fade());                break;            case 3://不用任何操作                       break;        }        setContentView(R.layout.activity_main2);          }}

Main2Activity的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:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".activitys.Main2Activity">    <View        android:id="@+id/holder_view"        android:layout_width="match_parent"        android:layout_height="300dp"        android:transitionName="share"<!--android:transitionName属性share-->        android:background="#4cA3D2"/>    <Button        android:transitionName="fab"<!--transitionName属性fab-->        android:layout_width="56dp"        android:layout_height="56dp"        android:background="@drawable/aaa"        android:elevation="5dp"        android:layout_below="@+id/holder_view"        android:layout_marginTop="-26dp"        android:layout_alignParentEnd="true"        android:layout_marginRight="20dp"        android:layout_alignParentRight="true" />    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/holder_view">        <Button            android:layout_width="match_parent"            android:layout_height="60dp"            android:layout_marginTop="10dp"            android:id="@+id/button4"            />        <Button            android:id="@+id/button"            android:layout_width="match_parent"            android:layout_height="60dp"            android:background="#4cA3D2"            android:layout_below="@+id/button4"            />    </RelativeLayout></RelativeLayout>