Android：Animation动画

浏览数：22 / 时间：2015年06月11日

    Animation主要分为两类：一类是渐变动画tweened animation，一类是逐帧动画frame-by-frame animation。渐变动画就是用一帧图片产生四种效果：1、alpha，2、rotate，3、scale，4、translates，可以通过代码或者xml文件两种方法实现。而逐帧动画就是由一系列图片通过快速播放达到动的效果。另外还有一些Animationset、AnimationListener、LayoutAnimationController这些在实例中穿插着讲。

    实例一：代码实现tweened animation

①新建一个布局文件：四个Button加一个ImageView

<span style="font-size:14px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/imageview"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="100dp"
            android:src="@drawable/arrow" />
    </LinearLayout>
    <Button
        android:id="@+id/button_alpha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_rotate"
        android:text="Alpha" />
    <Button
        android:id="@+id/button_rotate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_scale"
        android:text="rotate" />
    <Button
        android:id="@+id/button_scale"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_translate"
        android:text="scale" />
    <Button
        android:id="@+id/button_translate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="translate" />
</RelativeLayout></span>
②Activity 

<span style="font-size:14px;">package com.example.f_animation_tween;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
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 MainActivity extends ActionBarActivity {
	private Button button_alpha, button_rotate, button_scale, button_trans;
	private ImageView imageView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		button_alpha = (Button) findViewById(R.id.button_alpha);
		button_rotate = (Button) findViewById(R.id.button_rotate);
		button_scale = (Button) findViewById(R.id.button_scale);
		button_trans = (Button) findViewById(R.id.button_translate);
		imageView = (ImageView) findViewById(R.id.imageview);
		button_alpha.setOnClickListener(new ButtonAlphaListerner());
		button_rotate.setOnClickListener(new ButtonRotateListerner());
		button_scale.setOnClickListener(new ButtonScaleListerner());
		button_trans.setOnClickListener(new ButtonTransListerner());
	}

	private class ButtonAlphaListerner implements OnClickListener {

		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			// 新建一个AlphaAnimation，构造器参数代表从1到0的淡化
			AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
			// 淡化时长为2秒
			alphaAnimation.setDuration(2000);
			// 重复两次，加一次是三次
			alphaAnimation.setRepeatCount(2);
			// 设置一个监听器
			alphaAnimation.setAnimationListener(new AnimationListener() {

				@Override
				public void onAnimationStart(Animation arg0) {
					// TODO Auto-generated method stub
					System.out.println("--->start");
				}

				@Override
				public void onAnimationRepeat(Animation arg0) {
					// TODO Auto-generated method stub
					System.out.println("--->repeat");
				}

				@Override
				public void onAnimationEnd(Animation arg0) {
					// TODO Auto-generated method stub
					System.out.println("--->end");
				}
			});
			// 让图片产生淡化动画
			imageView.startAnimation(alphaAnimation);
			// 也可以让其他控件产生动画
			button_alpha.startAnimation(alphaAnimation);
		}
	}

	private class ButtonRotateListerner implements OnClickListener {

		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			// 旋转动画，围绕的中心点由构造器的得出：
			// 第三四个参数代表X轴相对于自身最大，五六个参数Y轴同理，相当于图片的
			// 右下角的点，Animation.RELATIVE_TO_PARENT是相对于父控件
			RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
					Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF,
					1);
			rotateAnimation.setDuration(2000);
			imageView.startAnimation(rotateAnimation);
		}
	}

	private class ButtonScaleListerner implements OnClickListener {

		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			// 横向纵向都缩小为原来的0.1，围绕的点和上面同理
			ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1,
					0.1f, Animation.RELATIVE_TO_SELF, 1,
					Animation.RELATIVE_TO_SELF, 1);
			scaleAnimation.setDuration(2000);
			// 让其定格在最后
			scaleAnimation.setFillAfter(true);
			imageView.startAnimation(scaleAnimation);
		}

	}

	private class ButtonTransListerner implements OnClickListener {

		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
			TranslateAnimation translateAnimation = new TranslateAnimation(
					Animation.RELATIVE_TO_PARENT, 0,
					Animation.RELATIVE_TO_PARENT, 1,
					Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
					0);
			AnimationSet animationSet = new AnimationSet(true);
			// 可以通过一个AnimationSet添加多个动画效果，他是Animation的子类
			animationSet.addAnimation(translateAnimation);
			animationSet.addAnimation(alphaAnimation);
			animationSet.setDuration(2000);
			imageView.startAnimation(animationSet);
		}
	}

}
</span>

实例二：用XML中实现渐变动画

①在res文件夹下新建一个anim文件夹，添加一个alpha.xml文件

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator" >
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set></span>
②Activity主要代码 

<span style="font-size:14px;">private class ButtonAlphaListerner implements OnClickListener {

	@Override
	public void onClick(View arg0) {
		// TODO Auto-generated method stub
		Animation alphaAnimation = AnimationUtils.loadAnimation(
				MainActivity.this, R.anim.alpha);
		imageView.startAnimation(alphaAnimation);
	}

}</span>
对于批量修改来说xml的方法是更快的，当然也可以再xml文件中添加几个动画效果，具体的参数需要时就上网查，这里提供一个框架。


实例三：逐帧动画

①在drawable文件夹下放入几张图片然后新建一个anim.xml文件

<span style="font-size:14px;"><?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/up"
        android:duration="500"/>
    <item
        android:drawable="@drawable/right"
        android:duration="500"/>
    <item
        android:drawable="@drawable/down"
        android:duration="500"/>
    <item
        android:drawable="@drawable/left"
        android:duration="500"/>
a
</animation-list></span>
②Activity主要代码 

<span style="font-size:14px;">private class ButtonListener implements OnClickListener {

	@Override
	public void onClick(View arg0) {
		// TODO Auto-generated method stub
		imageView.setBackgroundResource(R.drawable.anim);
		AnimationDrawable animationDrawable = (AnimationDrawable) imageView
				.getBackground();                 //AnimationDrawable类就是用于实现逐帧动画
		isStart = !isStart;
		if (isStart)
			animationDrawable.start();
		else
			animationDrawable.stop();
	}

}</span>

实例四：LayoutAnimationController的使用

A layout animation controller is used to animated a layout‘s, or a view group‘s, children. Each child uses the same animation but for every one of them, the animation starts at a different time.

ListView也是继承ViewGroup的，所以以它为例写一个Demo。

①布局文件

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test" />

</LinearLayout></span>

②res文件夹下新建一个anim文件夹，新建anim.xml和anim_layout.xml两个文件

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha
        android:duration="1000"
        android:fromAlpha="0"
        android:toAlpha="1" />
</set></span>
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/anim"
    android:animationOrder="random"
    android:delay="200%" />
</span>
以上xml设置动画效果，执行顺序，和间隔时间

③Activity

package com.example.f_animation_layoutcon;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.Adapter;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;

public class MainActivity extends ActionBarActivity {

	private Button button;
	private ListView listView;
	private ArrayAdapter<String> adapter;
	private List<String> list;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		button = (Button) findViewById(R.id.button);
		listView = (ListView) findViewById(R.id.listview);
		list = new ArrayList<String>();
		list.add("北京");
		list.add("上海");
		list.add("广州");
		adapter = new ArrayAdapter<String>(MainActivity.this,
				android.R.layout.simple_list_item_1, list);

		button.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				Animation animation = AnimationUtils.loadAnimation(
						MainActivity.this, R.anim.anim);
				LayoutAnimationController lac = new LayoutAnimationController(
						animation);
				lac.setOrder(LayoutAnimationController.ORDER_RANDOM);
				lac.setDelay(1.0f);
				listView.setLayoutAnimation(lac);
				listView.setAdapter(adapter);
				// 也可以直接在listview里面指定layoutAnimation
				// 在ListView中添加属性android:layoutAnimation="@anim/anim_layout"
			}
		});
	}

}



执行效果，点击Button后，ListView的项目一个一个显示，而不是一下就全部显示。







小结：1、tween animation的两种实现方式、XML对批量修改更有用，事件监听器。2、frame-by-frame animation。3、LayoutAnimationController也是有两种实现方式。
























































          









          

            

              
              郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
            

          


          


          

            标签： 
            Android
            
            iOS
            
            移动互联
            
            终端开发
            
          


          

            

              
相关文章

              
    
                
              

            

            

              
随机文章

              
            

          



          

            

              
您可能还喜欢

              
    
                
              

            


            

              
您可能还喜欢