Android Animation初步

原创
2014/05/14 18:34
阅读数 41

Animation从总体来说可以分为两类:

  1. Tweened Animations:该类提供了旋转,移动,伸展,淡入淡出等效果

  2. Frame-By-Frame Animations:该类可以创建一个Drawable序列,这些Drawable可以按照指定的事件间隔一个一个显示,和动画片差不多

一、Tweened Animations

Tweened Animations也有四种类型:

  1. Alpha:淡入淡出效果

  2. Scale:缩放效果

  3. Rotate:旋转效果

  4. Translate:移动效果

设置动画效果可以在XML文件中设置,也可以在Java代码中设置。我们先来讲解在Java代码中怎么设置这四种动画效果

Java代码中设置动画效果的步骤:

  1. 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)

  2. 根据需要创建相应的Animation对象

  3. 根据需要对Animation对象的各个属性进行设值

  4. 将Animation对象添加到AnimationSet对象中

  5. 使用控件的startAnimation()方法执行AnimationSet

Java代码中的通用属性:

  • setDuration(long durationMillis):设置动画持续事件(单位:毫秒)

  • setFillAfter(boolean fillAfter):如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态

  • setFillBefore(boolean fillBefore):如果fillBefore设为true,则动画执行后,控件将回到动画开始的状态

  • setStartOffset(long startOffset):设置动画执行之前等待的时间(单位:毫秒)

  • setRepeatCount(int repeatCount):设置动画重复的次数

  • setInterpolator(Interpolator i):设置动画的变化速度

setInterpolator(new AccelerateDecelerateInterpolator()):先加速,后减速

setInterpolator(new AccelerateInterpolator()):加速

setInterpolator(new DecelerateInterpolator()):减速

setInterpolator(new CycleInterpolator()):动画循环播放特定次数,速率改变沿着正弦曲线

setInterpolator(new LinearInterpolator()):匀速

以及其他一些特定的动画效果

Java代码中设置动画效果的Demo(AnimationDemo01):

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dip"
        android:src="@drawable/ic_launcher" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom"
        android:orientation="vertical" >
        <Button
            android:id="@+id/alphaButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试alpha动画效果" />
        <Button
            android:id="@+id/scaleButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试scale动画效果" />
        <Button
            android:id="@+id/rotateButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试rotate动画效果" />
        <Button
            android:id="@+id/translateButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试translate动画效果" />
    </LinearLayout>
</LinearLayout>
AnimationDemoActivity.java
package com.tianjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
    private ImageView mImageView;
    private Button mAlphaButton;
    private Button mScaleButton;
    private Button mRotateButton;
    private Button mTranslateButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImageView = (ImageView) findViewById(R.id.imageView);
        mAlphaButton = (Button) findViewById(R.id.alphaButton);
        mScaleButton = (Button) findViewById(R.id.scaleButton);
        mRotateButton = (Button) findViewById(R.id.rotateButton);
        mTranslateButton = (Button) findViewById(R.id.translateButton);
        mAlphaButton.setOnClickListener(this);
        mScaleButton.setOnClickListener(this);
        mRotateButton.setOnClickListener(this);
        mTranslateButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.alphaButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            AnimationSet animationSet = new AnimationSet(true);
            // 创建一个AlphaAnimation对象(参数表示从完全不透明到完全透明)
            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
            // 设置动画执行的时间(单位:毫秒)
            alphaAnimation.setDuration(1000);
            // 将AlphaAnimation对象添加到AnimationSet当中
            animationSet.addAnimation(alphaAnimation);
            // 使用ImageView的startAnimation方法开始执行动画
            mImageView.startAnimation(animationSet);
            break;
        case R.id.scaleButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            animationSet = new AnimationSet(true);
            // 创建一个ScaleAnimation对象(以某个点为中心缩放)
            ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1, 0.1f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            // 设置动画执行之前等待的时间(单位:毫秒)
            scaleAnimation.setStartOffset(1000);
            // 设置动画执行的时间(单位:毫秒)
            scaleAnimation.setDuration(2000);
            // 如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态
            // 运行了一下发现以下奇怪的现象
            // scaleAnimation.setFillAfter(true);不会停留在动画结束的状态
            // animationSet.setFillAfter(true);则会停留在动画结束的状态
            animationSet.setFillAfter(true);
                        // 将ScaleAnimation对象添加到AnimationSet当中
                       &nbsp;animationSet.addAnimation(scaleAnimation);
                        // 使用ImageView的startAnimation方法开始执行动画
&nbsp;                       mImageView.startAnimation(animationSet);
            break;
        case R.id.rotateButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            animationSet = new AnimationSet(true);
            // 创建一个RotateAnimation对象(以某个点为圆心旋转360度)
            RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
                    Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.25f);
            // 设置动画执行的时间(单位:毫秒)
            rotateAnimation.setDuration(5000);
            // 将RotateAnimation对象添加到AnimationSet当中
            animationSet.addAnimation(rotateAnimation);
            // 使用ImageView的startAnimation方法开始执行动画
            mImageView.startAnimation(animationSet);
            break;
        case R.id.translateButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            animationSet = new AnimationSet(true);
            // 创建一个RotateAnimation对象(从某个点移动到另一个点)
            TranslateAnimation translateAnimation = new TranslateAnimation(
                    Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.0f);
            // 设置动画执行的时间(单位:毫秒)
            translateAnimation.setDuration(1000);
            // 将TranslateAnimation对象添加到AnimationSet当中
            animationSet.addAnimation(translateAnimation);
            // 使用ImageView的startAnimation方法开始执行动画
            mImageView.startAnimation(animationSet);
            break;
        default:
            break;
        }
    }
}
AlphaAnimation很简单,不多说,直接看代码注释

剩下的3中动画效果都涉及到了参考点的问题,下面我们逐一解释

RotateAnimation的创建中用到了Animation.RELATIVE_TO_PARENT(表示以父控件为参考),另外还有2种参考:Animation.RELATIVE_TO_SELF(以自身为参考),Animation.ABSOLUTE(绝对坐标,没有参考)

我们就拿Animation.RELATIVE_TO_PARENT来画图讲解到底RotateAnimation旋转的圆心在哪儿?

例子中,X轴设置了相对于父控件,值是0.5f;Y轴设置了相对于父控件,值是0.25f。也就是说,圆心是0.5个父控件的width和0.25个父控件的height

那么,控件就围绕着上图的圆心,从0°旋转到360°(如果是0,-360,那么就是0°旋转到-360°)

以父控件为参照理解了的话,以自身为参考就可以举一反三了。

ScaleAnimation的创建的参数的解释:缩放的中心点可以按照上文中的计算方法,缩小后的图片大小是0.1个自身width,0.1个自身height,相当于缩小90%

TranslateAnimation的创建的参数的解释:参数主要是决定移动的起始点和终了点,计算方法参考上文

上面的Java代码设置动画效果有一个缺点:代码的可复用性很低,不利于维护。为了维护,可以使用XML来设置动画效果

XML中设置动画效果的步骤:

  1. 在res文件夹下新建一个名为anim的文件夹

  2. 创建xml文件,并首先加入set标签(set标签就相当于Java代码中的AnimationSet)

  3. 在Set标签中加入alpha,scale,rotate,translate标签(相当于Java代码中的AlphaAnimation,ScaleAnimation,RotateAnimation,TranslateAnimation)

  4. 在Java代码中使用AnimationUtils的loadAnimation方法来加载XML文件,并得到一个Animation对象

  5. 使用控件的startAnimation()方法执行这个Animation对象

XML中的通用属性:

  • android:duration:设置动画持续事件(单位:毫秒)

  • android:fillAfter:如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态

  • android:fillBefore:如果fillBefore设为true,则动画执行后,控件将回到动画开始的状态

  • android:startOffset(long startOffset):设置动画执行之前等待的时间(单位:毫秒)

  • android:repeatCount(int repeatCount):设置动画重复的次数

  • android:interpolator:设置动画的变化速度

android:interpolator="@android :anim/accelerate_decelerate_interpolator":先加速,后减速

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

android:interpolator="@android :anim/decelerate_interpolator":减速

android:interpolator="@android :anim/cycle_Interpolator":动画循环播放特定次数,速率改变沿着正弦曲线

android:interpolator="@android :anim/linear_Interpolator":匀速

以及其他一些特定的动画效果

XML中设置动画效果的Demo(AnimationDemo02):


main.xml

同上

alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:startOffset="500"
        android:toAlpha="0.0" />
</set>
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <rotate
        android:duration="5000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</set>
scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>
translate.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:duration="2000"
        android:fromXDelta="50%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="100%" />
</set>
AnimationDemoActivity.java
package com.tianjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
    private ImageView mImageView;
    private Button mAlphaButton;
    private Button mScaleButton;
    private Button mRotateButton;
    private Button mTranslateButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImageView = (ImageView) findViewById(R.id.imageView);
        mAlphaButton = (Button) findViewById(R.id.alphaButton);
        mScaleButton = (Button) findViewById(R.id.scaleButton);
        mRotateButton = (Button) findViewById(R.id.rotateButton);
        mTranslateButton = (Button) findViewById(R.id.translateButton);
        mAlphaButton.setOnClickListener(this);
        mScaleButton.setOnClickListener(this);
        mRotateButton.setOnClickListener(this);
        mTranslateButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.alphaButton:
            Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);
            mImageView.startAnimation(alphaAnimation);
            break;
        case R.id.scaleButton:
            Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
            mImageView.startAnimation(scaleAnimation);
            break;
        case R.id.rotateButton:
            Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
            mImageView.startAnimation(rotateAnimation);
            break;
        case R.id.translateButton:
            Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);
            mImageView.startAnimation(translateAnimation);
            break;
        default:
            break;
        }
    }
}
关于属性的讲解,已经在AnimationDemo01中讲解过了,在此就不再重复了。


值得一提的是,AnimationDemo01中出现的绝对定位(Animation.ABSOLUTE),相对于自身定位(Animation.RELATIVE_TO_SELF),相对于父控件定位(Animation.RELATIVE_TO_PAREN),在XML文件中用XX(绝对),XX%(相对于自身),XX%p(相对于父控件)


上面两个例子都有一个类叫:AnimationSet(XML文件中是set标签),这个AnimationSet就相当于一个集合,可以存放一个或多个Animation对象,如果我们对AnimationSet设置属性值,那么,这些属性值将应用到AnimationSet下的所有Animation对象中去。



二、Frame-By-Frame Animations


直接上代码(AnimationDemo03)

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dip" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom"
        android:orientation="vertical" >
        <Button
            android:id="@+id/frameByFrameButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试Frame-By-Frame动画效果" />
    </LinearLayout>
</LinearLayout>
anim_nv.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item
        android:drawable="@drawable/nv1"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv2"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv3"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv4"
        android:duration="500"/>
</animation-list>
AnimationDemoActivity.java
package com.tianjf;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
    private ImageView mImageView;
    private Button mFrameByFrameButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImageView = (ImageView) findViewById(R.id.imageView);
        mFrameByFrameButton = (Button) findViewById(R.id.frameByFrameButton);
        mFrameByFrameButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.frameByFrameButton:
            // 为ImageView设置背景资源
            mImageView.setBackgroundResource(R.drawable.anim_nv);
            // 通过ImageView得到AnimationDrawable
            AnimationDrawable animationDrawable = (AnimationDrawable) mImageView.getBackground();
            // 开始执行动画
            animationDrawable.start();
            break;
        default:
            break;
        }
    }
}


三、LayoutAnimationController

什么是LayoutAnimationController呢?LayoutAnimationController用于为一个Layout里面的一组控件设置相同的动画效果,并可以控制这一组动画在不同的时间出现


LayoutAnimationController可以在XML中设置,也可在Java代码中设置

先看一个在XML中设置的Demo(AnimationDemo04)

list_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true" >
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>
list_anim_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="1"
    android:animationOrder="normal"
    android:animation="@anim/list_anim" />
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ListView
        android:id="@id/android:list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layoutAnimation="@anim/list_anim_layout"
        android:scrollbars="vertical"
        android:visibility="gone" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom"
        android:orientation="vertical" >
        <Button
            android:id="@+id/button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试LayoutAnimation动画效果" />
    </LinearLayout>
</LinearLayout>
item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:paddingBottom="1dip"
    android:paddingLeft="10dip"
    android:paddingRight="10dip"
    android:paddingTop="1dip" >
    <TextView
        android:id="@+id/user_name"
        android:layout_width="180dip"
        android:layout_height="30dip"
        android:singleLine="true"
        android:textSize="20dip" />
    <TextView
        android:id="@+id/user_gender"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:singleLine="true"
        android:textSize="20dip" />
</LinearLayout>
AnimationDemoActivity.java
package com.tianjf;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class AnimationDemoActivity extends ListActivity implements OnClickListener {
    private ListView mListView;
    private Button mButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mListView = getListView();
        mButton = (Button) findViewById(R.id.button);
        mListView.setAdapter(buildListAdapter());
        mButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.button:
            mListView.setVisibility(View.VISIBLE);
            break;
        default:
            break;
        }
    }
    private ListAdapter buildListAdapter() {
        List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
        HashMap<String, String> m1 = new HashMap<String, String>();
        m1.put("user_name", "张三");
        m1.put("user_gender", "女");
        HashMap<String, String> m2 = new HashMap<String, String>();
        m2.put("user_name", "李四");
        m2.put("user_gender", "女");
        HashMap<String, String> m3 = new HashMap<String, String>();
        m3.put("user_name", "王五");
        m3.put("user_gender", "男");
        list.add(m1);
        list.add(m2);
        list.add(m3);
        SimpleAdapter simpleAdapter = new SimpleAdapter(this, list, R.layout.item, new String[] {
                "user_name", "user_gender" }, new int[] { R.id.user_name, R.id.user_gender });
        return simpleAdapter;
    }
}
layoutAnimation标签中的android:animationOrder属性就是设置动画的显示顺序的,normal就是依次显示出来


如果要在Java代码中设置LayoutAnimation,可以按照如下设置

删掉list_anim_layout.xml文件,删掉main.xml下的ListView的android:layoutAnimation属性,最后,在OnClick方法里面加上如下代码:

Animation animation = (Animation) AnimationUtils.loadAnimation(this, R.anim.list_anim);
LayoutAnimationController lac = new LayoutAnimationController(animation);
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
lac.setDelay(0.5f);
mListView.setLayoutAnimation(lac);


四、AnimationListener

还可以为Animation对象添加AnimationListener监听器。监听动画执行的各阶段。


AnimationListener主要包含三个方法:

  1. onAnimationEnd:动画结束

  2. onAnimationStart:动画开始

  3. onAnimationRepet:动画重复


原文: http://blog.csdn.net/tianjf0514/article/details/7566304

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部