Android中的动画效果学习


在Android中系统给我们提供了两种实现动画效果的方法,其中一种是Tween,还有一种是Frame动画;

Tween动画中,我们可以通过Tween动画去使得视图实现视图放大,缩小,旋转,渐变等等功能;这个动画类在android.view.animation包下面,

主要为我们提供以下的一些常用方法:(【注】以下对于些类的解释说明,是我看文档自己翻译的,可能有些地方不准确,也算是自己作为学习英语的机会,还请大家见谅一下哈)

  Animation   这是动画的抽象类,其他的几个实现的动画类继承这个类

  AnimationSet这是动画的属性的集合类

  AnimationUtils   这个类是定义动画工具类

  AlphaAnimation    这个类可以对动画的透明度进行控制

  RotateAnimation   这个类可以对动画的旋转的位置进行控制
  ScaleAnimation   这个类可以对动画的大小进行控制

 TranslateAnimation  这个类可以对动画位置进行控制

下面是Twwen动画的一些常用动画实现类的说明

AlphaAnimation 类(渐变调整透明度)常用的构造方法
AlphaAnimation(float fromAlpha, float toAlpha)   
参数说明:

                      float fromAlpha :动画刚开始的透明度   ,  

                       float toAlpha:动画结束的透明度  取值范围是(0.0到1.0,;0.0代表不透明,1.0代表完全透明)


            RoateAnimation 类 (动画旋转)   常用的构造方法     
           RotateAnimation(float fromDegrees, float toDegrees),
           RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY),
           RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
           参数说明:fromDegrees:开始旋转的角度,.toDegrees:结束旋转的角度
                            .pivotXType:在X坐标方向的伸缩的方式,pivotYType:在Y坐标方向的伸缩方式;
                             pivotXValue:在X坐标方向的伸缩值,pivotYValue:在Y坐标方向的伸缩值


            ScaleAnimation 类(动画大小的控制类) 常用的构造方法
             ScaleAnimation(float fromX, float toX, float fromY, float toY)
             ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
             ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
             参数说明:fromX: 起始的X坐标,toX:结束的X坐标,fromY:起始的Y坐标,toY:结束的Y坐标
                            .pivotXType:在X坐标方向的伸缩的方式,pivotYType:在Y坐标方向的伸缩方式;                      
                             pivotXValue:在X坐标方向的伸缩值,pivotYValue:在Y坐标方向的伸缩值

           TranslateAnimation类(动画位置控制) 常用的构造方法
           TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
          参数说明: fromXDelta:起始的X坐标;toXDelta:结束的X坐标
                            fromYDelta:起始的Y坐标,toYDelta:结束的Y坐标
 

  要实现Twwen动画的效果,有两种办法 第一个种是直接在代码中进行设置,第二种是在XML文件进行配置;

  首先下看下直接编码设置的办法:

Demo源代码如下:

  1. package com.android.animation;  
  2.   
  3. import com.android.R;  
  4.   
  5. import android.app.Activity;  
  6. import android.os.Bundle;  
  7. import android.view.View;  
  8. import android.view.View.OnClickListener;  
  9. import android.view.animation.AlphaAnimation;  
  10. import android.view.animation.Animation;  
  11. import android.view.animation.RotateAnimation;  
  12. import android.view.animation.ScaleAnimation;  
  13. import android.view.animation.TranslateAnimation;  
  14. import android.widget.Button;  
  15. import android.widget.ImageView;  
  16.   
  17. public class Demo_Animation extends Activity {  
  18.   
  19.     // 定义四个按钮,分别对用四种动画效果操作   
  20.     private Button alpha, roate, scale, translate;  
  21.   
  22.     // 声明ImageView组件   
  23.     private ImageView animation_test;  
  24.   
  25.     @Override  
  26.     protected void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         setContentView(R.layout.animation);  
  29.   
  30.         animation_test = (ImageView) this.findViewById(R.id.test_animation);  
  31.         alpha = (Button) this.findViewById(R.id.alpha);  
  32.         roate = (Button) this.findViewById(R.id.roate);  
  33.         scale = (Button) this.findViewById(R.id.scale);  
  34.         translate = (Button) this.findViewById(R.id.translate);  
  35.   
  36.         // 为按钮组件添加监听事件   
  37.         alpha.setOnClickListener(new OnClickListener() {  
  38.   
  39.             @Override  
  40.             public void onClick(View v) {  
  41.   
  42.                 // 创建渐变的 AlphaAnimation()构造方法中 参数要加 f 因为是浮点型的   
  43.                 Animation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);  
  44.                 // 设置画面渐变的时间 单位:毫秒 本实例设置为3 s   
  45.                 alphaAnimation.setDuration(3000);  
  46.                 // 为图片添加效果,开始动画   
  47.                 animation_test.setAnimation(alphaAnimation);  
  48.             }  
  49.         });  
  50.   
  51.         roate.setOnClickListener(new OnClickListener() {  
  52.   
  53.             /** 
  54.              * 其中有设置旋转的伸缩的方法 有 
  55.              *  
  56.              * @author jiangqq ①:Animation.RELATIVE_TO_SELF 
  57.              * @author jiangqq ②:Animation.RELATIVE_TO_PARENT 
  58.              * @author jiangqq ③:Animation.ABSOLUTE 
  59.              */  
  60.             @Override  
  61.             public void onClick(View v) {  
  62.                 // 设置旋转   
  63.                 Animation roateAnimation = new RotateAnimation(0f, +180f,  
  64.                         Animation.RELATIVE_TO_SELF, 1.0f,  
  65.                         Animation.RELATIVE_TO_SELF, 1.0f);  
  66.                 // 设置画面渐变的时间 单位:毫秒 本实例设置为3 s   
  67.                 roateAnimation.setDuration(3000);  
  68.                 // 为图片添加效果,开始动画   
  69.                 animation_test.setAnimation(roateAnimation);  
  70.             }  
  71.         });  
  72.   
  73.         scale.setOnClickListener(new OnClickListener() {  
  74.   
  75.             /** 
  76.              * 其中沿X轴与Y轴的伸缩方式的三种模式 在上面roate监听类方法中有说明了 
  77.              */  
  78.             @Override  
  79.             public void onClick(View v) {  
  80.                 Animation scaleAnimation = new ScaleAnimation(0.0f, 1.0f, 0.0f,  
  81.                         1.0f, Animation.RELATIVE_TO_SELF, 1.5f,  
  82.                         Animation.RELATIVE_TO_SELF, 1.5f);  
  83.                 // 设置画面渐变的时间 单位:毫秒 本实例设置为3 s   
  84.                 scaleAnimation.setDuration(3000);  
  85.                 // 为图片添加效果,开始动画   
  86.                 animation_test.setAnimation(scaleAnimation);  
  87.             }  
  88.         });  
  89.         translate.setOnClickListener(new OnClickListener() {  
  90.   
  91.             /** 
  92.              * 位置变化 
  93.              */  
  94.             @Override  
  95.             public void onClick(View v) {  
  96.                 Animation translateAnimation = new TranslateAnimation(0.0f,  
  97.                         15.0f, 0.0f, 15.0f);  
  98.                 // 设置画面渐变的时间 单位:毫秒 本实例设置为3 s   
  99.                 translateAnimation.setDuration(3000);  
  100.                 // 为图片添加效果,开始动画   
  101.                 animation_test.setAnimation(translateAnimation);  
  102.             }  
  103.         });  
  104.     }  
  105. }  
 
  1. </pre><p></p><p><span style="font-size:16px;">布局文件如下:</span></p><p><span style="font-size:16px;">  </span></p><p><span style="font-size:16px;"></span></p><p><span style="font-size:16px;"></span></p><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <ImageView  
  8.         android:id="@+id/test_animation"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:src="@drawable/animation_test" />  
  12.   
  13.     <LinearLayout  
  14.         xmlns:android="http://schemas.android.com/apk/res/android"  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="match_parent"  
  17.         android:layout_marginTop="20dip" >  
  18.   
  19.         <Button  
  20.             android:id="@+id/alpha"  
  21.             android:layout_width="wrap_content"  
  22.             android:layout_height="wrap_content"  
  23.             android:text="alpha" />  
  24.   
  25.         <Button  
  26.             android:id="@+id/roate"  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:text="roate" />  
  30.   
  31.         <Button  
  32.             android:id="@+id/scale"  
  33.             android:layout_width="wrap_content"  
  34.             android:layout_height="wrap_content"  
  35.             android:text="scale" />  
  36.   
  37.         <Button  
  38.             android:id="@+id/translate"  
  39.             android:layout_width="wrap_content"  
  40.             android:layout_height="wrap_content"  
  41.             android:text="translate" />  
  42.     </LinearLayout>  
  43.   
  44. </LinearLayout>  
效果截图:

  • 1
  • 2
  • 下一页
【内容导航】
第1页:Tween动画(硬编码方法创建) 第2页:Tween动画(使用XML文件进行配置动画效果)

相关内容