码迷，mamicode.com
首页 > 其他好文 > 详细

Animation动画效果简单汇总

时间：2015-03-12 20:54:18      阅读：186      评论：0      收藏：0      [点我收藏+]

标签：animation android

————————————案例结构很复杂一步步来————————————

1、activity_main.xml（首先看启动界面布局文件，里面有2个button）

<?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" >
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="toTestVA"
        android:text="Test View Animation" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="toTestDA"
        android:text="Test Drawable Animation" />
</LinearLayout>

2、MainActivity.java(看加载布局文件的主入口代码，代码做的就是启动2个activity)

package com.atguigu.l10_animation;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
	/*
	 * 测试View Annimation
	 */
	public void toTestVA(View v) {
		startActivity(new Intent(this, VAActivity.class));
	}
	/*
	 * 测试Drawable Annimation
	 */
	public void toTestDA(View v) {
		startActivity(new Intent(this, DAActivity.class));
	}
}

3、首先看startActivity(new Intent(this, VAActivity.class));启动的界面布局文件如下

activity_animation_va.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeScale"
            android:text="Code Scale" />


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlScale"
            android:text="Xml Scale" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeRotate"
            android:text="Code Rotate" />


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlRotate"
            android:text="Xml Rotate" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeAlpha"
            android:text="Code Alpha" />


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlAlpha"
            android:text="Xml Alpha" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeTranslate"
            android:text="Code Translation" />


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlTranslate"
            android:text="Xml Translation" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeAnimationSet"
            android:text="Code AnimationSet" 
            android:textSize="15sp"/>


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlAnimationSet"
            android:text="Xml AnimationSet" 
            android:textSize="15sp"/>
    </LinearLayout>
    
    <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:onClick="testAnimationListener"
            android:text="Test Animation Listener"/>


    <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/atguigu" 
        android:layout_gravity="center_horizontal"/>


    <TextView
        android:id="@+id/tv_animation_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示动画描述信息" 
        android:textSize="18dp"/>
</LinearLayout>
4、然后看VAActivity.java（就是操作activity_animation_va.xml视图的代码）

VAActivity.java（代码里有5种简单的动画效果，每种动画效果都有代码和.xml文件2种形式）

package com.atguigu.l10_animation;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class VAActivity extends Activity {
	//定义图片视图资源
	private ImageView iv_animation;
	//显示动画描述信息
	private TextView tv_animation_msg;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_animation_va);
		//获取图片
		iv_animation = (ImageView) findViewById(R.id.iv_animation);
		//获取描述信息的对象
		tv_animation_msg = (TextView) findViewById(R.id.tv_animation_msg);
	}

	/**
	 * 1.1 编码实现: 缩放动画 ScaleAnimation
	 *  fromX : 开始时X轴上的缩放比例 toX : 结束时X轴上的缩放比例 
	 *  fromY :开始时Y轴上的缩放比例 toY :结束时Y轴上的缩放比例
	 * 
	 * pivotXType : X轴坐标的类型(计算x轴上的偏移量的方式) pivotXVlaue : 中心点相对视图左顶点在x轴上的偏移量
	 * pivotYType : Y轴坐标的类型(计算x轴上的偏移量的方式) pivotYValue : 中心点相对视图左顶点在y轴上的偏移量
	 */
	public void startCodeScale(View v) {
		//ScaleAnimation animation = new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue)
	
		ScaleAnimation animation = new ScaleAnimation(0.0f, 1.0f, 0.5f, 1.0f,
				Animation.ABSOLUTE, 10.0f, Animation.ABSOLUTE, 20.0f);

		// 延迟时间, 单位ms
		animation.setStartOffset(1000);
		// 持续的时间, 单位ms
		animation.setDuration(5000);
		// 固定在原来大小
		animation.setFillBefore(true);
		// 开启动画
		iv_animation.startAnimation(animation);
	}

	/**
	 * 1.2 xml实现: 缩放动画 <scale>
	 */
	public void startXmlScale(View v) {
		// 加载动画配置文件
		Animation animation = AnimationUtils.loadAnimation(this,
				R.anim.scale_test);
		// 启动动画
		iv_animation.startAnimation(animation);
	}

	/**
	 * 2.1 编码实现: 旋转动画 RotateAnimation
	(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)
	
	fromDegrees : 开始时的角度
	toDegrees : 结束时的角度
	pivotXType : X轴坐标的类型
	pivotXVlaue : X轴坐标的值
	pivotYType :  Y轴坐标的类型
	pivotYValue : Y轴坐标的值
	 */
	public void startCodeRotate(View v) {
		//逆时针旋转180度
		RotateAnimation animation = new RotateAnimation(90f, -90f,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		//顺时针旋转360度(以对角线重点为中心)
		//animation = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF,
		//0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		
		animation.setDuration(9000);
		// 设置无限重复动画
		animation.setRepeatCount(Animation.INFINITE);
		//启动动画
		iv_animation.startAnimation(animation);
	}

	/**
	 * 2.2 xml实现: 旋转动画 <rotate>？？？？？？？？？？？？？？？？
	 */
	public void startXmlRotate(View v) {
		Animation animation = AnimationUtils.loadAnimation(this,
				R.anim.rotate_test);
		iv_animation.startAnimation(animation);
	}

	/**
	 * 3.1 编码实现: 透明度动画 AlphaAnimation
	new AlphaAnimation(fromAlpha, toAlpha)
	 */
	public void startCodeAlpha(View v) {
		AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);
		animation.setDuration(2000);
		iv_animation.startAnimation(animation);
	}

	/**
	 * 3.2 xml实现: 透明度动画 <alpha>
	 */
	public void startXmlAlpha(View v) {
		Animation animation = AnimationUtils.loadAnimation(this,
				R.anim.alpha_test);
		iv_animation.startAnimation(animation);
	}

	/**
	 * 4.1 编码实现: 平衡动画 TranslateAnimation
	new TranslateAnimation(fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue)
	
	fromXType : 坐标类型
	fromXValue : 开始时X轴的坐标
	toXType :坐标类型
	toXValue : 结束时X轴的坐标
	fromYType :坐标类型
	fromYValue : 开始时Y轴的坐标
	toYType :坐标类型
	toYValue : 结束时Y轴的坐标

	 */
	public void startCodeTranslate(View v) {
		TranslateAnimation animation = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
				1.0f, Animation.RELATIVE_TO_SELF, 0.0f,
				Animation.RELATIVE_TO_SELF, 1.0f);
		animation.setDuration(2000);
		iv_animation.startAnimation(animation);
	}

	/**
	 * 4.2 xml实现: 平衡动画 <translate>
	 */
	public void startXmlTranslate(View v) {
		Animation animation = AnimationUtils.loadAnimation(this,
				R.anim.translate_test);
		iv_animation.startAnimation(animation);
	}

	/**
	 * 5.1 编码实现: 复合动画 AnimationSet
	 */
	public void startCodeAnimationSet(View v) {
		//参数为false、没有任何动画效果
		AnimationSet animationSet = new AnimationSet(false);
		// 透明度动画
		AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
		alphaAnimation.setDuration(2000);
		animationSet.addAnimation(alphaAnimation);

		// 旋转动画
		RotateAnimation rotateAnimation = new RotateAnimation(0.0f, 360f,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		rotateAnimation.setDuration(1000);
		rotateAnimation.setStartOffset(2000);// 延迟2s
		animationSet.addAnimation(rotateAnimation);

		// 启动动画
		iv_animation.startAnimation(animationSet);
	}

	/**
	 * 5.2 xml实现: 复合动画 <set>
	 */
	public void startXmlAnimationSet(View v) {
		Animation animation = AnimationUtils.loadAnimation(this,
				R.anim.set_test);
		iv_animation.startAnimation(animation);
	}

	/**
	 * 6. 测试动画监听
	 */
	public void testAnimationListener(View v) {
		AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);
		animation.setDuration(2000);
		animation.setRepeatCount(2);
		//设置动画监听
		animation.setAnimationListener(new Animation.AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {
				Log.e("TAG", "动画开始");
			}

			@Override
			public void onAnimationRepeat(Animation animation) {
				Log.e("TAG", "动画重复");
			}

			@Override
			public void onAnimationEnd(Animation animation) {
				Log.e("TAG", "动画结束");
			}
		});
		iv_animation.startAnimation(animation);
	}
}
5、针对上面的代码，下面是依次的动画的布局文件


5-1、缩放动画布局文件如下

scale_test.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="1.5"
    android:fromYScale="0.0"
    android:toYScale="1.0"
    android:startOffset="1000"
    android:duration="3000"
    android:pivotX="100%"
    android:pivotY="100%"
    android:fillAfter="true"/>
<!-- 
	Animation.ABSOLUTE : 
		数值(默认以px为单位)
	Animation.RELATIVE_TO_SELF : 
		百分数,如:50% (以当前视图的宽度或高度其为基数来计算)
	Animation.RELATIVE_TO_PARENT : 
		百分数+p,如:50%p (以父视图的宽度或高度其为基数来计算)
 -->

5-2、旋转动画布局方式如下

rotate_test.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="-90" 
    android:duration="5000">
</rotate>

<!-- 
	Xml旋转动画: 以左顶点为坐标, 从正90度到负90度, 持续5s
	默认中心点左顶点开始
 -->

5-3、透明动画布局文件如下

alpha_test.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    	android:fromAlpha="1.0"
    	android:toAlpha="0.0"
    	android:duration="1000">
</alpha>
<!-- 
	Xml透明度动画: 从完全不透明到完全透明, 持续1s
 -->

5-4、平移动画布局文件如下

translate_test.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%" 
    android:toXDelta="-100%"
    android:duration="4000">
</translate>

<!-- 
	xml移动动画: 从屏幕的右边逐渐回到原来的位置, 持续2s
 -->

5-5、复合动画布局如下

set_test.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0" 
        android:toAlpha="1"
        android:duration="2000"/>
   	<rotate android:fromDegrees="0"
   	    android:toDegrees="360"
   	    android:duration="2000"
   	    android:startOffset="2000"
   	    android:pivotX="50%"
   	    android:pivotY="50%"/>
</set>

<!-- 
	Xml复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续2s
 -->



6、接下来看MainActivity.java启动的另外一个activity

startActivity(new Intent(this, DAActivity.class));

先看布局文件

activity_animation_da.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/iv_da_mm"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="160dp"
        android:background=<span style="color:#ff6666;">"@drawable/anim_da</span>"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true" >
        <Button
            android:id="@+id/btn_da_start"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="启动动画" />
        <Button
            android:id="@+id/btn_da_stop"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="结束动画" />
    </LinearLayout>

</RelativeLayout>


接下来是
<span style="color:#ff6666;">anim_da</span>

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false">
    <!-- oneshot: 是否只显示一次 -->
   <item android:drawable="@drawable/nv1" android:duration="500"></item>
   <item android:drawable="@drawable/nv2" android:duration="500"></item>
   <item android:drawable="@drawable/nv3" android:duration="500"></item>
   <item android:drawable="@drawable/nv4" android:duration="500"></item>
</animation-list>

DAActivity.java 

package com.atguigu.l10_animation;
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;
/*
 * 测试: Drawable Animation
 */
public class DAActivity extends Activity implements OnClickListener {
	private ImageView iv_da_mm;
	private Button btn_da_start;
	private Button btn_da_stop;

	private AnimationDrawable animationDrawable;
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_animation_da);
		iv_da_mm = (ImageView) findViewById(R.id.iv_da_mm);
		btn_da_start = (Button) findViewById(R.id.btn_da_start);
		btn_da_stop = (Button) findViewById(R.id.btn_da_stop);
		
		animationDrawable = (AnimationDrawable) iv_da_mm.getBackground();

		btn_da_start.setOnClickListener(this);
		btn_da_stop.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		if (v == btn_da_start) {
			//启动图片动画
			animationDrawable.start();
		} else if (v == btn_da_stop) {
			//停止图片动画
			animationDrawable.stop();
		}
	}
}




Animation动画效果简单汇总

标签：animation android

原文地址：http://blog.csdn.net/u013210620/article/details/44225849
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！