Android View Animation Example

来源：互联网发布：java开发实战1200例pdf 编辑：程序博客网时间：2024/05/06 05:20

Android View Animation 是android的一个基础的动画结构，它可以让我们轻松地制作补间动画（tween animation），只要你设置了你的View的动画的起始时间那么他可以帮助我们通过连续的简单变化或者同时的变化轻松地制作android动画。这个animation类几乎是兼容所有的android上面的View控件如：ImageView，TextView和Button等。但是这个animation类在制作动画的时候只是通过改变控件的位置，大小，角度和透明度来实现的。

android动画旋转的例子：

我们在制作Animation动画的时候既可以通过在XMl里面进行静态的建立也可以通过java代码来动态的实现，Google的建议是通过XML的方式来建立，因为这样的XML文件便于阅读，更改，而且可以重复利用。下面就给出一些例子吧，这里对于每一个动画我都会用两种方式来实现。

下面的例子我将制作一个图片旋转的动画，在这个demo的布局如下：

Android View Animation Rotate Example

当我按下上面的按钮的时候布局中间的那个猫的图片就会以图片中心为中心点360的旋转一圈。下面是布局的文件(main.xml):

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

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

03    android:layout_width="fill_parent"

04    android:layout_height="fill_parent">

05    <Button android:id="@+id/testButton" android:text="@string/animationText"

06        android:layout_width="wrap_content"

07        android:layout_height="wrap_content"/>

08

09    <ImageView android:id="@+id/testImage" android:src="@drawable/cat2"

10        android:contentDescription="@string/image_desc"

11        android:layout_centerInParent="true"

12        android:layout_height="wrap_content"android:layout_width="wrap_content" android:scaleType="fitCenter"/>

13</RelativeLayout>

为了实现我们的动画，上面已经说了，我们有两种方法，这里我们先用XML的方式来实现，首先，我们现在res文件夹下面建立一个新的文件夹叫做anim，然后我们在这个文件夹里面建立一个rotate_around_point.xml,具体代码如下：
1<?xml version="1.0" encoding="utf-8"?>
2<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="1000"
4    android:valueFrom="0"
5    android:valueTo="360"
6    android:valueType="floatType"
7    android:propertyName="rotation"
8    android:repeatCount="0"/>
下面在我们的MainActivity里面我们加入如下代码来“装载”定义的动画格式：

1ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);
2Animator animation = AnimatorInflater.loadAnimator(this, R.anim.rotate_around_center_point);
3animation.setTarget(animationTarget);
4animation.start();

前面已经说了还有一个直接在java代码里面写的方法，如下：

1ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(animationTarget,"rotation", 360f);

2scaleXAnimator.setRepeatCount(0);

3scaleXAnimator.setDuration(1000);

4scaleXAnimator.start();

android动画放大缩小的例子：

android不仅仅可以帮助我们实现图片的旋转而且它也可以帮助我们实现图片的放大与缩小，类似于上面的方法，我们就试试改变图片大小的动画吧！

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

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

3    android:duration="1000"

4    android:valueFrom="1"

5    android:valueTo="0.5"

6    android:valueType="floatType"

7    android:propertyName="scaleX"

8    android:repeatCount="1"

9    android:repeatMode="reverse"/>

同样的我们也在MainActivity里面来“装载”它：

1ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);

2Animator animation = AnimatorInflater.loadAnimator(this, R.anim.scale_animation);

3animation.setTarget(animationTarget);

4animation.start();

或者我们直接用java代码来实现：

1ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(animationTarget,"scaleX", 0.5f);

2scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);

3scaleXAnimator.setRepeatCount(1);

4scaleXAnimator.setDuration(1000);

5scaleXAnimator.start();

组合动画的例子：

运行完上面的例子，我们就会发现其实只是我们的图片的宽度变小了，高度上面没有变化，这是因为我们把一个动画对象应用在了图片上，下面我们来试一下几个动画效果放在同一个控件的例子，这样的话我们就要用到AnimatorSet对象，他可以帮助我们同时应用几个动画效果，下面我们来看一下代码吧！

01<set>

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

03        android:duration="1000"

04        android:valueFrom="1"

05        android:valueTo="0.5"

06        android:valueType="floatType"

07        android:propertyName="scaleX"

08        android:repeatCount="1"

09        android:repeatMode="reverse"/>

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

11        android:duration="1000"

12        android:valueFrom="1"

13        android:valueTo="0.5"

14        android:valueType="floatType"

15        android:propertyName="scaleY"

16        android:repeatCount="1"

17        android:repeatMode="reverse"/>

18</set>

在上面的代码里面，细心地读者就会发现我们在这里定义了两个动画对象，一个控制图片的宽度而另外一个控制图片的高度，那么如何让两个对象一起运行呢？下面我们就看一下它在MainActivity里面的实现方法吧！

1ImageView zoomTarget = (ImageView) findViewById(R.id.testImage);

2Animator zoomAnimation = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.anim.zoom_in_out_animation);

3zoomAnimation.setTarget(zoomTarget);

4zoomAnimation.start();

同样的，我们也可以用java代码来实现：

01ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleX",0.5f);

02scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);

03scaleXAnimator.setRepeatCount(1);

04scaleXAnimator.setDuration(1000);

05

06ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleY",0.5f);

07scaleYAnimator.setRepeatMode(ValueAnimator.REVERSE);

08scaleYAnimator.setRepeatCount(1);

09scaleYAnimator.setDuration(1000);

10

11AnimatorSet set = new AnimatorSet();

12set.playTogether(scaleXAnimator, scaleYAnimator);

13set.start();

Android的大小变化与旋转的例子：

在上面的例子中我们已经实现了旋转的动画与大小变化的动画，现在就让我们来把他们整合在一起吧！

XMl的代码：

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

02<set>

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

04        android:duration="1000"

05        android:valueFrom="1"

06        android:valueTo="0.5"

07        android:valueType="floatType"

08        android:propertyName="scaleX"

09        android:repeatCount="1"

10        android:repeatMode="reverse"/>

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

12        android:duration="1000"

13        android:valueFrom="1"

14        android:valueTo="0.5"

15        android:valueType="floatType"

16        android:propertyName="scaleY"

17        android:repeatCount="1"

18        android:repeatMode="reverse"/>

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

20        android:duration="1000"

21        android:valueFrom="0"

22        android:valueTo="360"

23        android:valueType="floatType"

24        android:propertyName="rotation"

25        android:repeatCount="1"

26        android:repeatMode="restart"/>

27</set>

在MainActivity里面的引用：

1ImageView zoomTarget = (ImageView) findViewById(R.id.testImage);

2Animator zoomAnimation = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.anim.zoom_rotation_animation);

3zoomAnimation.setTarget(zoomTarget);

4zoomAnimation.start();

下面就是Java代码，不过可以明显的感觉出Java代码的“多”了。。。

01ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleX",0.5f);

02scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);

03scaleXAnimator.setRepeatCount(1);

04scaleXAnimator.setDuration(1000);

05

06ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleY",0.5f);

07scaleYAnimator.setRepeatMode(ValueAnimator.REVERSE);

08scaleYAnimator.setRepeatCount(1);

09scaleYAnimator.setDuration(1000);

10

11ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(zoomTarget,"rotation", 0f, 360f);

12rotationAnimator.setRepeatMode(ValueAnimator.RESTART);

13rotationAnimator.setRepeatCount(1);

14rotationAnimator.setDuration(1000);

15

16AnimatorSet set = new AnimatorSet();

17set.playTogether(scaleXAnimator, scaleYAnimator, rotationAnimator);

18set.start();

Android的先大小变化与旋转的例子：

上面我们已经实现了各种效果同时变化的效果了，可是有时候我们需要先执行一个动画然后执行另外的一个，那么这个怎么呢？下面就给出一个例子，它实现了先对图片进行大小变化的动画然后再让这个图片旋转一圈的效果：

01ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleX",0.5f);

02scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);

03scaleXAnimator.setRepeatCount(1);

04scaleXAnimator.setDuration(1000);

05

06ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(zoomTarget, "scaleY",0.5f);

07scaleYAnimator.setRepeatMode(ValueAnimator.REVERSE);

08scaleYAnimator.setRepeatCount(1);

09scaleYAnimator.setDuration(1000);

10

11ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(zoomTarget,"rotation", 0f, 360f);

12rotationAnimator.setRepeatMode(ValueAnimator.RESTART);

13rotationAnimator.setRepeatCount(1);

14rotationAnimator.setDuration(1000);

15

16//sequencial animation

17AnimatorSet set = new AnimatorSet();

18set.play(scaleXAnimator).with(scaleYAnimator);

19set.play(scaleXAnimator).before(rotationAnimator);

20set.start();

好了，就说这么多，希望可以帮到大家！

0 0