Android Animations动画使用详解

傷城~ 2022-08-25 11:57 204阅读 0赞

**一、动画类型**

Android的animation由四种类型组成：alpha、scale、translate、rotate

XML配置文件中

<table style="font-size:14px; border-style:solid; border-color:rgb(227,237,245); color:rgb(68,68,68); font-family:Verdana,Helvetica,Arial,sans-serif; line-height:22px; background-color:rgb(248,248,248); word-wrap:break-word; empty-cells:show; border-collapse:collapse; width:500px; table-layout:fixed; margin-left:1px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> alpha </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 渐变透明度动画效果 </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> scale </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 渐变尺寸伸缩动画效果 </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> translate </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 画面转换位置移动动画效果 </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> rotate </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 画面转移旋转动画效果 </td> 
 </tr> 
 </tbody> 
</table>

Java Code代码中

<table style="font-size:14px; border-style:solid; border-color:rgb(227,237,245); color:rgb(68,68,68); font-family:Verdana,Helvetica,Arial,sans-serif; line-height:22px; background-color:rgb(248,248,248); word-wrap:break-word; empty-cells:show; border-collapse:collapse; width:500px; table-layout:fixed; margin-left:1px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> AlphaAnimation </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 渐变透明度动画效果 </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> ScaleAnimation </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 渐变尺寸伸缩动画效果 </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> TranslateAnimation </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 画面转换位置移动动画效果 </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> RotateAnimation </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> 画面转移旋转动画效果 </td> 
 </tr> 
 </tbody> 
</table>

**二、Android动画模式**

Animation主要有两种动画模式：tweened 和 frame

*  一种是tweened animation(渐变动画)

<table style="font-size:14px; border-style:solid; border-color:rgb(227,237,245); color:rgb(68,68,68); font-family:Verdana,Helvetica,Arial,sans-serif; line-height:22px; background-color:rgb(248,248,248); word-wrap:break-word; empty-cells:show; border-collapse:collapse; width:500px; table-layout:fixed; margin-left:1px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; padding:4px; overflow:hidden; line-height:1.6em"> XML中 </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; padding:4px; overflow:hidden; line-height:1.6em"> JavaCode </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; padding:4px; overflow:hidden; line-height:1.6em"> alpha </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; padding:4px; overflow:hidden; line-height:1.6em"> AlphaAnimation </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; padding:4px; overflow:hidden; line-height:1.6em"> scale </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; padding:4px; overflow:hidden; line-height:1.6em"> ScaleAnimation </td> 
 </tr> 
 </tbody> 
</table>

*  一种是frame by frame(画面转换动画)

<table style="font-size:14px; border-style:solid; border-color:rgb(227,237,245); color:rgb(68,68,68); font-family:Verdana,Helvetica,Arial,sans-serif; line-height:22px; background-color:rgb(248,248,248); word-wrap:break-word; empty-cells:show; border-collapse:collapse; width:500px; table-layout:fixed; margin-left:1px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> XML中 </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> JavaCode </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> translate </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> TranslateAnimation </td> 
 </tr> 
 <tr style="word-wrap:break-word"> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> rotate </td> 
 <td style="font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14px; border-style:solid; border-color:rgb(227,237,245); word-wrap:break-word; line-height:1.6em; padding:4px; overflow:hidden"> RotateAnimation </td> 
 </tr> 
 </tbody> 
</table>

**三、XML****文件中定义动画**

①　打开Eclipse，新建Android工程

②　在res目录中新建anim文件夹

③　在anim目录中新建一个myanim.xml(注意文件名小写)

④　加入XML的动画代码

1. <?xml version="1.0" encoding="utf-8"?> 
 
2. <set xmlns:android="http://schemas.android.com/apk/res/android"> 
 
3.   <alpha/> 
 
4.   <scale/> 
 
5.   <translate/> 
 
6.   <rotate/> 
 
7. </set>

**四、Android ****XML****动画解析**

1. Alpha

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. />  
 
8.  
 
22. </set>

2. Scale

1. <?xml version="1.0" encoding="utf-8"?> 
 
2. <set xmlns:android="http://schemas.android.com/apk/res/android"> 
 
3.    <scale   
 
4.           android:interpolator= 
 
5.                      "@android:anim/accelerate\_decelerate\_interpolator" 
 
6.           android:fromXScale="0.0" 
 
7.           android:toXScale="1.4" 
 
8.           android:fromYScale="0.0" 
 
9.           android:toYScale="1.4" 
 
10.           android:pivotX="50%" 
 
11.           android:pivotY="50%" 
 
12.           android:fillAfter="false" 
 
13.           android:duration="700" /> 
 
14. </set> 
 
15.

3. Translate

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. /> 
 
10.  
 
23. </set>

4. Rotate

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.  
 
42. </set>

**XML** **中使用动画效果**

1.  public static Animation loadAnimation (Context context, int id)   
    
2.  //第一个参数Context为程序的上下文      
    
3.  //第二个参数id为动画XML文件的引用  
    
4.  //例子：  
    
5.  myAnimation= AnimationUtils.loadAnimation(this, R.anim.my\_action);  
    
6.  //使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件

**五、Java****代码中定义动画**

1.  //在代码中定义 动画实例对象  
    
2.  private Animation myAnimation\_Alpha;  
    
3.  private Animation myAnimation\_Scale;  
    
4.  private Animation myAnimation\_Translate;  
    
5.  private Animation myAnimation\_Rotate;  
    
6.    
    
7.      //根据各自的构造方法来初始化一个实例对象  
    
8.  myAnimation\_Alpha = new AlphaAnimation(0.1f, 1.0f);  
    
9.    
    
10. myAnimation\_Scale = new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,  
    
11.              Animation.RELATIVE\_TO\_SELF, 0.5f, Animation.RELATIVE\_TO\_SELF, 0.5f);  
    
12.   
    
13. myAnimation\_Translate = new TranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);  
    
14.   
    
15. myAnimation\_Rotate = new RotateAnimation(0.0f, +350.0f,  
    
16.                Animation.RELATIVE\_TO\_SELF,0.5f,Animation.RELATIVE\_TO\_SELF, 0.5f);

**六、Android 代码****动画解析**

1. AlphaAnimation

AlphaAnimation类对象定义

1.     1. private AlphaAnimation myAnimation\_Alpha;

AlphaAnimation类对象构造

1.  AlphaAnimation(float fromAlpha, float toAlpha)   
    
2.  //第一个参数fromAlpha为 动画开始时候透明度  
    
3.  //第二个参数toAlpha为 动画结束时候透明度  
    
4.  myAnimation\_Alpha = new AlphaAnimation(0.1f, 1.0f);  
    
5.  //说明:   
    
6.  //                0.0表示完全透明  
    
7.  //                1.0表示完全不透明

设置动画持续时间

1.  myAnimation\_Alpha.setDuration(5000);  
    
2.  //设置时间持续时间为 5000毫秒

2. ScaleAnimation  
ScaleAnimation类对象定义

1.  private ScaleAnimation myAnimation\_Scale;

ScaleAnimation类对象构造

1.  ScaleAnimation(float fromX, float toX, float fromY, float toY,  
    
2.             int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)   
    
3.  //第一个参数fromX为动画起始时 X坐标上的伸缩尺寸      
    
4.  //第二个参数toX为动画结束时 X坐标上的伸缩尺寸       
    
5.  //第三个参数fromY为动画起始时Y坐标上的伸缩尺寸      
    
6.  //第四个参数toY为动画结束时Y坐标上的伸缩尺寸    
    
7.  /\*说明:  
    
8.                      以上四种属性值      
    
9.                      0.0表示收缩到没有   
    
10.                     1.0表示正常无伸缩       
    
11.                     值小于1.0表示收缩    
    
12.                     值大于1.0表示放大  
    
13. \*/  
    
14. //第五个参数pivotXType为动画在X轴相对于物件位置类型    
    
15. //第六个参数pivotXValue为动画相对于物件的X坐标的开始位置  
    
16. //第七个参数pivotXType为动画在Y轴相对于物件位置类型     
    
17. //第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置  
    
18. myAnimation\_Scale = new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,  
    
19.              Animation.RELATIVE\_TO\_SELF, 0.5f, Animation.RELATIVE\_TO\_SELF, 0.5f);

设置动画持续时间

1.  myAnimation\_Scale.setDuration(700);  
    
2.  //设置时间持续时间为 700毫秒

3. TranslateAnimation

ranslateAnimation类对象定义

1.  private TranslateAnimation myAnimation\_Translate;

TranslateAnimation类对象构造

1.  TranslateAnimation(float fromXDelta, float toXDelta,  
    
2.                         float fromYDelta, float toYDelta)   
    
3.  //第一个参数fromXDelta为动画起始时 X坐标上的移动位置      
    
4.  //第二个参数toXDelta为动画结束时 X坐标上的移动位置        
    
5.  //第三个参数fromYDelta为动画起始时Y坐标上的移动位置       
    
6.  //第四个参数toYDelta为动画结束时Y坐标上的移动位置

设置动画持续时间

1.  myAnimation\_Translate = new TranslateAnimation(10f, 100f, 10f, 100f);  
    
2.  myAnimation\_Translate.setDuration(2000);  
    
3.  //设置时间持续时间为 2000毫秒

4. RotateAnimation  
RotateAnimation类对象定义

1.  private RotateAnimation myAnimation\_Rotate;

RotateAnimation类对象构造

1.  RotateAnimation(float fromDegrees, float toDegrees,   
    
2.              int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)  
    
3.  //第一个参数fromDegrees为动画起始时的旋转角度      
    
4.  //第二个参数toDegrees为动画旋转到的角度     
    
5.  //第三个参数pivotXType为动画在X轴相对于物件位置类型    
    
6.  //第四个参数pivotXValue为动画相对于物件的X坐标的开始位置  
    
7.  //第五个参数pivotXType为动画在Y轴相对于物件位置类型     
    
8.  //第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置  
    
9.  myAnimation\_Rotate = new RotateAnimation(0.0f, +350.0f,  
    
10.                Animation.RELATIVE\_TO\_SELF,0.5f,Animation.RELATIVE\_TO\_SELF, 0.5f);

设置动画持续时间

1.  myAnimation\_Rotate.setDuration(3000);  
    
2.  //设置时间持续时间为 3000毫秒

**如何Java****代码中使用动画效果**  
 使用从View父类继承过来的方法startAnimation()来为View或是子类View等等添加一个动画效果

1.  public void startAnimation (Animation animation)
2.  view.startAnimation(myAnimation\_Alpha);
3.  view.startAnimation(myAnimation\_Scale);  
    
4.  view.startAnimation(myAnimation\_Translate);  
    
5.  view.startAnimation(myAnimation\_Rotate);