Activity切换动效之translate

最新推荐文章于 2024-02-29 15:40:40 发布

古月书斋

最新推荐文章于 2024-02-29 15:40:40 发布

阅读量2.3k

点赞数

分类专栏： Android的UI开发

Android的UI开发专栏收录该内容

27 篇文章 1 订阅

订阅专栏

原文：http://blog.csdn.net/menxu_work/article/details/10258787

http://www.oschina.net/question/97118_34523

一、简介

我们通过Activity的overridePendingTransition方法可以定制从一个activity跳转到另外一个activity时的动画。

public void overridePendingTransition (int enterAnim, int exitAnim)

这个函数有两个参数，一个参数enterAnim是要切换进入的那个activity进入时的动画，另外一个参数exitAnim则是要切换退出的那个activity退出时的动画。

Activity的切换效果使用的是Android的动画效果，Android的动画在官方有相关资料： http://developer.android.com/guide/topics/graphics/animation.html

和 http://developer.android.com/guide/topics/resources/animation-resource.html ，

Activity的切换动画实际上是Android的View Animation(视图动画)中的Tween Animation效果，Tween Animation分为4种动画效果，分别是：alpha (透明变化) translate(位置移动) scale(缩放) rotate(旋转), 而左右滑动切换使用的是 translate(位置移动)的效果，在下一篇我们再讨论一下 alpha (透明变化) 、scale(缩放)、 rotate(旋转) 这三种效果，本篇只将 translate(位置移动)。

Translate动画是非常好理解，就是定义一个开始的位置和一个结束位置，定义移动时间，然后就能自动产生移动动画。Android的translate移动方向有横向(X) 竖向(Y),。

左右滑动使用了横向移动效果，对于横向(X)的位置如下

从上图可以看出，以手机屏幕下面边未X轴，屏幕左边为Y轴，当Activity在X轴值为-100%p时，刚好在屏幕的左边（位置1），当X轴值为0%p时，刚好再屏幕内(位置2），当X=100%p时刚好在屏幕右边（位置3）。

上下滑动使用了竖向移动效果对于竖向(Y)的位置如下：

二、左右滑动切换动画

实现过程如下，首先定义2个动画，在 res目录创建anim目录，然后在目录创建动画的xml文件：out_to_left.xml (从左边退出动画) 、in_from_right.xml(从右边进入动画)

out_to_left.xml (从左边退出动画)

<? xml version = "1.0" encoding = "utf-8" ?>

<set xmlns:android = "http://schemas.android.com/apk/res/android"

android:interpolator = "@android:anim/accelerate_interpolator" >

<translate android:fromXDelta = "0%p" android:toXDelta = "-100%p"

android:duration = "500" >

</translate>

</set>

in_from_right.xml(从右边进入动画)

<? xml version = "1.0" encoding = "utf-8" ?>

<set xmlns:android = "http://schemas.android.com/apk/res/android"

android:interpolator = "@android:anim/accelerate_interpolator" >

<translate android:fromXDelta = "100%p" android:toXDelta = "0%p"

android:duration = "500" >

</translate>

</set>

注： android:fromXDelta动画开始X方向的位置， android:toXDelta 动画结束X方向的位置，android:duration动画的时间。

Android 代码如下：

package com . example . test ;

import android . app . Activity ;

import android . content . Context ;

import android . content . Intent ;

import android . os . Bundle ;

import android . view . View ;

import android . view . View .*;

import android . widget . Button ;

import android . widget . TextView ;

public class Activity1 extends Activity {

@Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState );

setContentView ( R . layout . activity1_main );

TextView tv =( TextView ) this . findViewById ( R . id . content );

tv . setText ( "Activity1" );

Button btnNext =( Button ) this . findViewById ( R . id . goActivity2 );

btnNext . setOnClickListener ( new OnClickListener (){

@Override

public void onClick ( View v ) {

// TODO Auto-generated method stub

Intent intent=new Intent();

intent.setClass(getApplicationContext(), Activity2.class);

startActivity(intent);

overridePendingTransition(R.anim.out_to_left,R.anim.in_from_right);

}

});

}

三、上下滑动切换动画

实现过程如下，首先定义2个动画，在 res目录创建anim目录，然后在目录创建动画的xml文件：out_to_up.xml (从上边退出动画) 、in_from_down.xml从下边进入动画)

out_to_up.xml (从上边退出动画)

<? xml version = "1.0" encoding = "utf-8" ?>

<translate xmlns:android = "http://schemas.android.com/apk/res/android"

android:interpolator = "@android:anim/accelerate_interpolator"

android:fromYDelta = "0%p"

android:toYDelta = "-100%p"

android:duration = "1000" >

</translate>

in_from_down.xml（从下边进入动画)

<? xml version = "1.0" encoding = "utf-8" ?>

<translate xmlns:android = "http://schemas.android.com/apk/res/android"

android:interpolator = "@android:anim/accelerate_interpolator"

android:fromYDelta = "100%p"

android:toYDelta = "0%p"

android:duration = "1000" >

</translate>

注： android: fromYDelta动画开始的Y方向位置， android:toYDelta动画结束的Y方向位置，android:duration动画的时间。

Android 代码如下：

package com . example . test ;

import android . app . Activity ;

import android . content . Intent ;

import android . os . Bundle ;

import android . view . View ;

import android . view . View . OnClickListener ;

import android . widget . Button ;

import android . widget . TextView ;

public class Activity2 extends Activity {

@Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState );

setContentView ( R . layout . activity2_main );

TextView tv =( TextView ) this . findViewById ( R . id . content );

tv . setText ( "Activity2" );

Button btnNext =( Button ) this . findViewById ( R . id . btnExit );

btnNext . setOnClickListener ( new OnClickListener (){

@Override

public void onClick ( View v ) {

// TODO Auto-generated method stub

finish();

overridePendingTransition(R.anim.in_from_down,R.anim.out_to_up);

}

});

}

四、translate的重要属性

1、interpolator

android:interpolator 用于设置插值器 interpolator 。关于插值器interpolator的更多内容请参考《 Tween Animation动画之插值器interpolator 》

2、duration

android:duration表示动画运行时间，定义在多次时间（ms）内完成动画

3、startOffset

android:startOffset表示延迟一定时间后运行动画

4、fromXDelta

fromXDelta表示X轴方向开始位置，可以是%，也可以是具体的像素具体见图

5、toXDelta

toXDelta表示X轴方向结束位置，可以是%，也可以是具体的像素

6、fromYDelta

fromYDelta表示Y轴方向开始位置，可以是%，也可以是具体的像素

7、toYDelta

toYDelta表示Y轴方向结束位置，可以是%，也可以是具体的像素

当你了解上面的属性后，你可以组合出很多有趣的位置移动效果。比如使用加速器：@android:anim/bounce_interpolator 可以产生弹球落地时的效果。

在实际项目中需要在进行只使用“左右上下滑动”的效果可能还不够炫，希望在切换时能产生更动态的效果，比如开始切换时第1个Activity先向后退一步，然后在向左方向退出屏幕。然后第2个Activity紧跟后面从右边进入屏幕，到达终点时有一个动态效果。在了解了动画加速器后，大家都知道可以采用：anticipate_overshoot_interpolator 、anticipate_interpolator、overshoot_interpolator这三个加速器实现左右滑动切换时启动或者结束的动态效果。

动画文件定义如下：

dync_out_to_left.xml

<? xml version = "1.0" encoding = "utf-8" ?>

<translate xmlns:android = "http://schemas.android.com/apk/res/android"

android:duration = "500"

android:fromXDelta = "0%p"

android:interpolator = "@android:anim/anticipate_interpolator"

android:toXDelta = "-100%p" />

dync_in_from_right.xml

<? xml version = "1.0" encoding = "utf-8" ?>

<translate xmlns:android = "http://schemas.android.com/apk/res/android"

android:duration = "500"