由于刚刚学习android studio,做的许多项目涉及到跳转页面,以及使用到各种各样的控件。但是由于单一的样式,控件的交互以及页面的跳转都显得过于单调,使用体验感不强。于是学习了如何进行页面的简单跳转过渡动画以及控件的交互动画。
完成效果如下:
录屏2
录屏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的使用过程中,这些动画的出现频率非常高,而且能大大提高用户的使用体验。本文章只是简单介绍了动画的设置和使用,具体的动画效果可以自行添加和设置,但是原理都是一样的。
作者:吴琳佳