android设置转场动画特效

由于刚刚学习android studio，做的许多项目涉及到跳转页面，以及使用到各种各样的控件。但是由于单一的样式，控件的交互以及页面的跳转都显得过于单调，使用体验感不强。于是学习了如何进行页面的简单跳转过渡动画以及控件的交互动画。

完成效果如下：

录屏2

制作过程
一、步骤
（1）创建两个页面分别为Mainactivity和Nerk页面

（2）在res文件夹下面创建anim文件，用来存放设计过渡动画的xml文件：

    首先在anim文件下创建button_in.xml文件和button_out.xml文件（分别代表向下切入和向上            切出的过渡动画）

    然后在button_in.xml文件中加入以下代码（具体原因等下一起说）

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromYDelta="100%p"
    android:toYDelta="0"/>

    然后在button_out.xml文件中加入以下代码：

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromYDelta="0"
    android:toYDelta="-100%p" />

     这样简单的过渡效果就制作好了，那么接下来就是如何使用这个效果了

（3）过渡页面动画的使用

    在nerk.xml文件中加入如下xml代码:

<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <TextView
        android:id="@+id/heihei"
        android:layout_width="300px"
        android:layout_height="200px"
        android:text="开始"
        android:textSize="35sp"
        android:gravity="center">
    </TextView>
</LinearLayout>

    然后在Nerk.java文件中给id为“heihei”的textview控件添加点击事件，在点击事件中加入如下代码：



    其中，Intent（Nerk.this，MainActivity.class）,表示设置页面跳转，即从Nerk页面跳转到Mainactivity页面。而

overridePendingTransition(R.anim.button_in, R.anim.button_out);
则表示加载改跳转动作的动画样式，切入动画为anim文件下的button_in.xml设置的动画，切出动画则为anim文件下的button_out.xml设置的动画。到此，页面的动画专场就完成了

    同理

    在Mainactivity.xml文件中加入如下xml代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <TextView
        android:id="@+id/back"
        android:layout_width="300px"
        android:layout_height="200px"
        android:text="返回"
        android:textSize="35sp"
        android:gravity="center">
    </TextView>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300px"
        android:background="#ff0f0f"
        android:id="@+id/text1">
    </TextView>
</LinearLayout>

给id为R.id.back的textview控件添加点击事件，在事件中添加如下代码

finish();
overridePendingTransition(R.anim.button_in, R.anim.button_out);

则完成了返回页面的动作。
二、解释
在开始编写的button_in和button_out文件中添加的translate控件，表示过渡动画的设置：

android:duration：设置的是动画的时间，300表示300ms
android:fromYDelta和android:toYDelta则设置垂直方向的动画平移
而参数中的100%p和0用以下这张图简单解释
在这里插入图片描述

    定义的是开始位置fromYDelta到toYDelta的位置，同理也可以设置fromXDelta到toXDelta，表示的是左右方向的过渡动画。

三、控件的出场动画
同理，该过渡动画不仅仅只能设置在转场页面的过渡之中，在页面加载时候，控件的出场也可以同样设置，例如上面截取的视频中，Mainactivity页面中红色块textview的出场则为x轴方向的平移，从屏幕的右方慢慢平移到屏幕中间。

    在anim文件下的xml文件内容均相同，一样设置动画，但是在引用方面不同

TextView te=findViewById(R.id.text1);
Animation animation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.list_first_move);
te.setAnimation(animation);

    首先用Animation类加载anim文件中的xml样式文件，然后利用setAnimation方法给控件添加刚刚加载的Animation动画效果。则设置完成

总结
在小程序的制作中，控件的动画样式和页面的转场样式都很重要，因为在app的使用过程中，这些动画的出现频率非常高，而且能大大提高用户的使用体验。本文章只是简单介绍了动画的设置和使用，具体的动画效果可以自行添加和设置，但是原理都是一样的。

作者：吴琳佳

原文链接

android设置转场动画特效

猜你喜欢