您的位置: 首页  >  文章  >  android Animation动画的xml使用

android Animation动画的xml使用

分类: 文章 • 2024-06-20 14:18:04

在Android应用程序，使用动画效果，能带给用户更好的感觉，做动画可以通过XML或android代码来实现。

Animation动画效果的实现可以通过两种方式进行实现，一种是tweened animation （渐变动画），另一种是frame by frame animation （画面转换动画）。

tweened animation渐变动画有以下两种类型：

1.alpha     渐变透明度动画效果

2.scale    渐变尺寸伸缩动画效果

frame by frame animation 画面转换动画有以下两种类型：

1.translate   画面转换位置移动动画效果

2.rotate    画面转移旋转动画效果

在这里，我使用XML来做动画。实现基本的动画，如淡入，旋转等。

步骤：1、首先在res目录中新建anim的文件夹，在anim中新建需要的动画xml资源文件。

anim/alpha.xml（渐变动画）

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <alpha  
  4.         android:fromAlpha="0.1"  
  5.         android:toAlpha="1.0"  
  6.         android:duration="3000"/>   
  7. <!-- 透明度控制动画效果 alpha  
  8.         浮点型值：  
  9.             fromAlpha 属性为动画起始时透明度  0.0表示完全透明  
  10.             toAlpha   属性为动画结束时透明度  1.0表示完全不透明  
  11.             以上值取0.0-1.0之间的float数据类型的数字  
  12.           
  13.         长整型值：  
  14.             duration  属性为动画持续时间 以毫秒为单位  
  15. -->  
  16. </set>  

anim/scale.xml（伸缩动画）

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.    <scale    
  4.           android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  5.           android:fromXScale="0.0"  
  6.           android:toXScale="1.4"  
  7.           android:fromYScale="0.0"  
  8.           android:toYScale="1.4"  
  9.           android:pivotX="50%"  
  10.           android:pivotY="50%"  
  11.           android:fillAfter="false"  
  12.           android:duration="700" />  
  13. </set>  
  14. <!-- 尺寸伸缩动画效果 scale  
  15.        属性：interpolator 指定一个动画的插入器  
  16.         在试验过程中，使用android.res.anim中的资源时候发现  
  17.         有三种动画插入器:  
  18.             accelerate_decelerate_interpolator  加速-减速 动画插入器  
  19.             accelerate_interpolator        加速-动画插入器  
  20.             decelerate_interpolator        减速- 动画插入器  
  21.         其他的属于特定的动画效果  
  22.       浮点型值：  
  23.             fromXScale 属性为动画起始时 X坐标上的伸缩尺寸  
  24.             toXScale   属性为动画结束时 X坐标上的伸缩尺寸  
  25.           
  26.             fromYScale 属性为动画起始时Y坐标上的伸缩尺寸  
  27.             toYScale   属性为动画结束时Y坐标上的伸缩尺寸  
  28.   
  29.             说明:以上四种属性值      
  30.                     0.0表示收缩到没有   
  31.                     1.0表示正常无伸缩       
  32.                     值小于1.0表示收缩    
  33.                     值大于1.0表示放大  
  34.   
  35.             pivotX     属性为动画相对于物件的X坐标的开始位置  
  36.             pivotY     属性为动画相对于物件的Y坐标的开始位置  
  37.   
  38.             说明:   以上两个属性值 从0%-100%中取值  
  39.                     50%为物件的X或Y方向坐标上的中点位置  
  40.           
  41.         长整型值：  
  42.             duration  属性为动画持续时间   以毫秒为单位  
  43.   
  44.         布尔型值:  
  45.             fillAfter 属性 当设置为true ，该动画转化在动画结束后被应用  
  46. -->  
anim/translate.xml(移动动画)
[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.      <translate  
  4.         android:fromXDelta="30"  
  5.         android:toXDelta="-80"  
  6.         android:fromYDelta="30"  
  7.         android:toYDelta="300"  
  8.         android:duration="2000"/>  
  9. <!-- translate 位置转移动画效果  
  10.         整型值:  
  11.             fromXDelta 属性为动画起始时 X坐标上的位置      
  12.             toXDelta   属性为动画结束时 X坐标上的位置  
  13.             fromYDelta 属性为动画起始时 Y坐标上的位置  
  14.             toYDelta   属性为动画结束时 Y坐标上的位置  
  15.             注意:  
  16.                      没有指定fromXType toXType fromYType toYType 时候，  
  17.                      默认是以自己为相对参照物               
  18.         长整型值：  
  19.             duration  属性为动画持续时间   以毫秒为单位  
  20. -->  
  21. </set>  

anim/rotate.xml(旋转动画)

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <rotate   
  4.         android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  5.         android:fromDegrees="0"   
  6.         android:toDegrees="+350"           
  7.         android:pivotX="50%"   
  8.         android:pivotY="50%"       
  9.         android:duration="3000" />    
  10. <!-- rotate 旋转动画效果  
  11.        属性：interpolator 指定一个动画的插入器  
  12.              在试验过程中，使用android.res.anim中的资源时候发现  
  13.              有三种动画插入器:  
  14.                 accelerate_decelerate_interpolator   加速-减速 动画插入器  
  15.                 accelerate_interpolator               加速-动画插入器  
  16.                 decelerate_interpolator               减速- 动画插入器  
  17.              其他的属于特定的动画效果  
  18.                              
  19.        浮点数型值:  
  20.             fromDegrees 属性为动画起始时物件的角度      
  21.             toDegrees   属性为动画结束时物件旋转的角度 可以大于360度     
  22.           
  23.             说明:    当角度为负数——表示逆时针旋转  
  24.                      当角度为正数——表示顺时针旋转                
  25.                      (负数from——to正数:顺时针旋转)     
  26.                      (负数from——to负数:逆时针旋转)   
  27.                      (正数from——to正数:顺时针旋转)   
  28.                      (正数from——to负数:逆时针旋转)         
  29.   
  30.             pivotX     属性为动画相对于物件的X坐标的开始位置  
  31.             pivotY     属性为动画相对于物件的Y坐标的开始位置  
  32.                   
  33.             说明:  以上两个属性值 从0%-100%中取值  
  34.                    50%为物件的X或Y方向坐标上的中点位置  
  35.   
  36.         长整型值：  
  37.             duration  属性为动画持续时间   以毫秒为单位  
  38. -->  
  39. </set>  

2、xml资源文件创建完成之后，接下来就是调用这些资源文件。以alpha为例，先创建AlphaActivity。

在activity_alpha.xml中随便放一张背景图片

[html] view plain copy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="@drawable/test_bg"  
  6.     tools:context=".AlphaActivity" >  
  7.   
  8. </RelativeLayout>  
AlphaActivity.java
[java] view plain copy
  1. package com.example.animation_demo;  
  2.    
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.view.View;  
  6. import android.view.animation.Animation;  
  7. import android.view.animation.Animation.AnimationListener;  
  8. import android.view.animation.AnimationUtils;  
  9. import android.widget.Toast;  
  10.    
  11. public class AlphaActivity extends Activity {  
  12.    
  13.     @Override  
  14.     protected void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         View view=View.inflate(this, R.layout.activity_alpha, null);  
  17.         setContentView(view);  
  18.         //使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件  
  19.         Animation animation=AnimationUtils.loadAnimation(this, R.anim.alpha);  
  20.         view.startAnimation(animation);  
  21.         animation.setAnimationListener(new AnimationListener() {  
  22.             @Override  
  23.             public void onAnimationStart(Animation arg0) {}   //在动画开始时使用  
  24.                
  25.             @Override  
  26.             public void onAnimationRepeat(Animation arg0) {}  //在动画重复时使用  
  27.   
  28.             @Override  
  29.             public void onAnimationEnd(Animation arg0) {  
  30.                 Toast.makeText(AlphaActivity.this, "在动画结束时使用", Toast.LENGTH_SHORT).show();  
  31.             }  
  32.         });  
  33.     }  
  34. }  

这个是整个layout文件的动画，也可以让任何UI元素调用starAnimation方法。

例如：textMsg.startAnimation(animation); 这时候就不需要下面代码 动画填充指定xml了

[java] view plain copy
  1. View view=View.inflate(this, R.layout.activity_alpha, null);  
  2. setContentView(view);  
直接setContentView(R.layout.activity_alpha); 就OK了。卒。

效果图：
android Animation动画的xml使用

附上找到的一些基本的xml效果：

Fade In：淡入

alpha是渐变透明度效果，值由0到1

[html] view plain copy
  1. fade_in.xml    
  2. <?xml version="1.0" encoding="utf-8"?>    
  3. <set xmlns:android="http://schemas.android.com/apk/res/android"    
  4.     android:fillAfter="true" >    
  5.      
  6.     <alpha    
  7.         android:duration="1000"    
  8.         android:fromAlpha="0.0"    
  9.         android:interpolator="@android:anim/accelerate_interpolator"    
  10.         android:toAlpha="1.0" />    
  11. </set>   
Fade Out ：淡出
以Fade In刚好相反，值由1到0
[html] view plain copy
  1. fade_out.xml    
  2. <?xml version="1.0" encoding="utf-8"?>    
  3. <set xmlns:android="http://schemas.android.com/apk/res/android"    
  4.     android:fillAfter="true" >    
  5.      
  6.     <alpha    
  7.         android:duration="1000"    
  8.         android:fromAlpha="1.0"    
  9.         android:interpolator="@android:anim/accelerate_interpolator"    
  10.         android:toAlpha="0.0" />    
  11. </set>    
Cross Fading:  交叉的淡入和淡出
同时使用Fade in和Fade out可以达到交叉的效果
[java] view plain copy
  1. public class CrossfadeActivity extends Activity implements AnimationListener {    
  2.     
  3.     TextView txtMessage1, txtMessage2;    
  4.     Button btnStart;    
  5.   
  6.     Animation animFadeIn, animFadeOut;    
  7.   
  8.     @Override    
  9.     protected void onCreate(Bundle savedInstanceState) {    
  10.         // TODO Auto-generated method stub    
  11.         super.onCreate(savedInstanceState);    
  12.         setContentView(R.layout.activity_crossfade);    
  13.   
  14.         txtMessage1 = (TextView) findViewById(R.id.txtMessage1);    
  15.         txtMessage2 = (TextView) findViewById(R.id.txtMessage2);    
  16.         btnStart = (Button) findViewById(R.id.btnStart);    
  17.   
  18.         // load animations    
  19.         animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),    
  20.                 R.anim.fade_in);    
  21.         animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),    
  22.                 R.anim.fade_out);    
  23.   
  24.         // set animation listeners    
  25.         animFadeIn.setAnimationListener(this);    
  26.         animFadeOut.setAnimationListener(this);    
  27.     
  28.         // button click event    
  29.         btnStart.setOnClickListener(new View.OnClickListener() {    
  30.     
  31.             @Override    
  32.             public void onClick(View v) {    
  33.                 txtMessage2.setVisibility(View.VISIBLE);    
  34.                 txtMessage2.startAnimation(animFadeIn);    
  35.                 txtMessage1.startAnimation(animFadeOut);    
  36.             }  
  37.         });  
  38.     }  
  39.     
  40.     @Override    
  41.     public void onAnimationEnd(Animation animation) {    
  42.             
  43.         if (animation == animFadeOut) {    
  44.             txtMessage1.setVisibility(View.GONE);    
  45.         }    
  46.             
  47.         if(animation == animFadeIn){    
  48.             txtMessage2.setVisibility(View.VISIBLE);    
  49.         }    
  50.     }    
  51.     
  52.     @Override    
  53.     public void onAnimationRepeat(Animation animation) {    
  54.         // TODO Auto-generated method stub    
  55.     }    
  56.     
  57.     @Override    
  58.     public void onAnimationStart(Animation animation) {    
  59.         // TODO Auto-generated method stub    
  60.     }    
  61. }  

BLink：若隐若现

[html] view plain copy
  1. blink.xml    
  2. <?xml version="1.0" encoding="utf-8"?>    
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">    
  4.     <alpha android:fromAlpha="0.0"    
  5.         android:toAlpha="1.0"    
  6.         android:interpolator="@android:anim/accelerate_interpolator"    
  7.         android:duration="600"    
  8.         android:repeatMode="reverse"    
  9.         android:repeatCount="infinite"/>    
  10. </set>    
Zoom In：放大
[html] view plain copy
  1. zoom_in.xml    
  2. <?xml version="1.0" encoding="utf-8"?>    
  3. <set xmlns:android="http://schemas.android.com/apk/res/android"    
  4.     android:fillAfter="true" >    
  5.     <scale    
  6.         xmlns:android="http://schemas.android.com/apk/res/android"    
  7.         android:duration="1000"    
  8.         android:fromXScale="1"    
  9.         android:fromYScale="1"    
  10.         android:pivotX="50%"    
  11.         android:pivotY="50%"    
  12.         android:toXScale="3"    
  13.         android:toYScale="3" >    
  14.     </scale>    
  15. </set>    
Zoom Out：缩小
[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:fillAfter="true" >    
  4.     <scale    
  5.         xmlns:android="http://schemas.android.com/apk/res/android"    
  6.         android:duration="1000"    
  7.         android:fromXScale="1.0"    
  8.         android:fromYScale="1.0"    
  9.         android:pivotX="50%"    
  10.         android:pivotY="50%"    
  11.         android:toXScale="0.5"    
  12.         android:toYScale="0.5" >    
  13.     </scale>    
  14. </set>    
Rotate：旋转
[html] view plain copy
  1. rotate.xml  
  2. <?xml version="1.0" encoding="utf-8"?>    
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">    
  4.     <rotate android:fromDegrees="0"    
  5.         android:toDegrees="360"    
  6.         android:pivotX="50%"    
  7.         android:pivotY="50%"    
  8.         android:duration="600"    
  9.         android:repeatMode="restart"    
  10.         android:repeatCount="infinite"    
  11.         android:interpolator="@android:anim/cycle_interpolator"/>    
  12. </set>  
好长啊。。。既然你们都看到这里了，再多说几句。。

根节点<set>的属性：

名称

属性

备注

android:shareInterpolator

是否共享插入器

共享时，四个子节点都用一个插入器

android:interpolator

指定一个动画的插入器

使用系统资源

android:fillEnabled

 

当设置为true时，fillAfter和fill, Befroe将会都为true，此时会忽略fillBefore 和fillAfter两种属性

android:fillAfter

该动画转化是否在动画结束后被应用

boolean

android:fillBefore

该动画转化是否在动画开始前被应用

boolean

android:repeatMode

重复模式

"restart"  或者 "reverse"

android:repeatCount

重复次数

integer

android:duration

动画持续时间

integer

android:startOffset

动画时间间隔

long

android:zAdjustment

定义动画z order的变换

[normal] or [top] or [bottom]

android:detachWallpaper

 

boolean

相关推荐