• Android学习笔记14:Tween Animation动画的实现


      在Android中,有两种动画模式:Tween Animation(渐变动画)和Frame Animation(帧动画)。渐变动画是通过对场景里的对象不断做图像变换(平移、缩放、旋转等)来产生动画效果。帧动画则是通过顺序播放事先准备好的图像来产生动画效果,和电影类似。

    1.通过Java代码实现Tween Animation

      Tween Animation动画效果是通过Animation类来实现的。Animation类有五个直接子类,分别为AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation和AnimationSet。其中,AlphaAnimation用来实现透明度渐变动画效果;ScaleAnimation用来实现尺寸伸缩渐变动画效果;TranslateAnimation用来实现画面转换位置移动动画效果;RotateAnimation用来实现画面转移旋转动画效果;AnimationSet则用于对多个动画进行组合。

    1.1AlphaAnimation类的常用方法

      AlphaAnimation类的常用方法如下:

      AlphaAnimation(float fromAlpha, float toAlpha);

      其中,参数fromAlpha表示动画起始时透明度;参数toAlpha表示动画结束时透明度(0.0表示完全透明,1.0表示完全不透明)

      willChangeBounds();//动画是否影响指定的视图范围

      willChangeTransformationMatrix();//动画是否影响转换矩阵

    1.2ScaleAnimation类的常用方法

      ScaleAnimation类的常用方法如下:

      ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue);

      其中,参数fromX、toX分别表示起始和结束时x坐标上的伸缩尺寸;参数fromY、toY分别表示起始和结束时y坐标上的伸缩尺寸;参数pivotXType、pivotYType分别表示x、y的伸缩模式;参数pivotXValue、pivotYValue分别表示伸缩动画相对于x、y的坐标的开始位置。

    1.3TranslateAnimation类的常用方法

      TranslateAnimation类的常用方法如下:

      TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta);

      其中,参数fromXDelta、fromYDelta分别表示起始时x、y坐标;参数toXDelta、toYDelta分别表示结束时x、y坐标。

    1.4RotateAnimation类的常用方法

      RotateAnimation类的常用方法如下:

      RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue);

      其中,参数fromDegrees表示开始时的角度;参数toDegrees表示结束时的角度;参数pivotXType、pivotYType分别表示x、y的伸缩模式;参数pivotXValue、pivotYValue分别表示伸缩动画相对于x、y的坐标的开始位置。

    1.5AnimationSet类的常用方法

      AnimationSet类的常用方法如下:

      AddAnimation(Animation a);//添加一个动画到动画组件中

      computeDurationHint();//动画组件的最大持续时间

      getAnimation();//获取动画

      getDuration();//获取动画组件的持续时间

      getStartTime();//获取动画开始的时间

      setDuration(long durationMillis);//设置动画持续时间

      setFillAfter(boolean fillAfter);//设置动画转换在动画结束后被应用

      setFillBefore(boolean fillBefore);//设置动画转换在动画开始前被应用

      setStartOffset(long startOffset);//设置动画之间的时间间隔

      etRepeatMode(int repeatMode);//设置动画的重复模式

     

    2.通过xml布局文件实现Tween Animation

      使用xml布局文件可以更简单的实现Tween Animation动画效果。

      Animation的xml布局文件存放在工程的res/anim目录下。

      在xml布局文件中必须包含根元素<set>。节点<alpha>、<scale>、<translate>和<rotate>分别对应AlphaAnimation、ScaleAnimation、TranslateAnimation和RotateAnimation四种动画效果。

    2.1Tween Animation的共同节点属性

      Tween Animation的共同节点属性有以下一些:

      android:duration[long]//动画的持续时间,单位为ms

      android:fillAfter[boolean]//设置为true时,动画转换在动画结束后被应用

      android:fillBefore[boolean]//设置为true时,动画转换在动画开始前被应用

      android:interpolator//设置动画的插入器,可选值有accelerate_decelerate_interpolator加速减速动画插入器,accelerate_interpolator加速动画插入器,decelerate_interpolator减速动画插入器

      android:repeatCount[int]//动画的重复次数

      android:repeatMode[int]//动画的重复模式,1表示重头开始重新播放,2表示从后往前重新播放

      android:startOffset[long]//设置动画之间的时间间隔

      android:zAdjustment[int]//

    2.2节点<alpha>的常用属性

      节点<alpha>的常用属性如下:

      android:fromAlpha[float]表示起始时透明度

      android:toAlpha[float]表示结束时透明度

      取值说明:0.0表示完全透明,1.0表示完全不透明

    2.3节点<scale>的常用属性

      节点<scale>的常用属性如下:

      android:fromXScale[float]表示动画起始时x坐标上的伸缩尺寸

      android:toXScale[float]表示动画结束时x坐标上的伸缩尺寸

      android:fromYScale[float]表示动画起始时y坐标上的伸缩尺寸

      android:toYScale[float]表示动画结束时y坐标上的伸缩尺寸

      取值说明:0.0表示收缩到没有,1.0表示正常无收缩,值大于1.0表示放大,值小于1.0表示收缩

      android:pivotX[float]表示动画相对于物件的x坐标的开始位置

      android:pivotY[float]表示动画相对于物件的y坐标的开始位置

    2.4节点<translate>的常用属性

      节点<translate>的常用属性如下:

      android:fromXDelta[int]表示动画起始时x坐标上的位置

      android:toXDelta[int]表示动画结束时x坐标上的位置

      android:fromYDelta[int]表示动画起始时y坐标上的位置

      android:toYDelta[int]表示动画结束时y坐标上的位置

    2.5节点<translate>的常用属性

      节点<rotate>的常用属性如下:

      android:fromDegrees表示动画起始时物件的角度

      android:toDegrees表示动画结束时物件的角度

      取值说明:负数from—正数to表示顺时针旋转,负数from—负数to表示逆时针旋转,正数from—正数to表示顺时针旋转,正数from—负数to表示逆时针旋转

      android:pivotX表示动画相对于物件的x坐标的开始位置

      android:pivotY表示动画相对于物件的y坐标的开始位置

     

    3.实例

      在本实例中,分别使用Java代码和xml布局文件实现了Tween Animation动画效果。通过使用上下左右键可以分别实现AlphaAnimation、ScaleAnimation、TranslateAnimation和RotateAnimation四种动画效果。

      TweenAnimation.java源代码如下:

    TweenAnimation.java源代码
     1 package com.example.android_tweenanimation;
     2 
     3 import android.content.Context;
     4 import android.graphics.Bitmap;
     5 import android.graphics.Canvas;
     6 import android.graphics.drawable.BitmapDrawable;
     7 import android.view.KeyEvent;
     8 import android.view.View;
     9 import android.view.animation.AlphaAnimation;
    10 import android.view.animation.Animation;
    11 import android.view.animation.AnimationUtils;
    12 import android.view.animation.RotateAnimation;
    13 import android.view.animation.ScaleAnimation;
    14 import android.view.animation.TranslateAnimation;
    15 
    16 public class TweenAnimation extends View {
    17 
    18     private Animation mAnimationAlpha = null;                        //Alpha动画
    19     private Animation mAnimationScale = null;                         //Scale动画
    20     private Animation mAnimationTranslate = null;                //Translate动画
    21     private Animation mAnimationRotate = null;                      //Rotate动画
    22     
    23     Context mContext = null;
    24     Bitmap mBitmap_fuwa = null;                      //Bitmap对象
    25     
    26     public TweenAnimation(Context context) {
    27         super(context);
    28         mContext = context;
    29         mBitmap_fuwa = ((BitmapDrawable) getResources().getDrawable
    30                 (R.drawable.fuwa)).getBitmap();                  //加载Bitmap对象
    31     }
    32 
    33     public void onDraw(Canvas canvas) {
    34         super.onDraw(canvas);
    35         canvas.drawBitmap(mBitmap_fuwa, 0, 0, null);
    36     }
    37     
    38     //按键按下事件
    39     public boolean onKeyDown(int keyCode, KeyEvent event) {
    40         switch(keyCode) {
    41         case KeyEvent.KEYCODE_DPAD_UP:                              //上键:Alpha动画效果
    42             mAnimationAlpha = new AlphaAnimation(0.1f, 1.0f);
    43             mAnimationAlpha.setDuration(3000);
    44 //            mAnimationAlpha = AnimationUtils.loadAnimation(mContext, R.anim.alpha_animation);
    45             this.startAnimation(mAnimationAlpha);
    46             break;
    47         case KeyEvent.KEYCODE_DPAD_DOWN:                      //下键:Scale动画效果
    48             mAnimationScale = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
    49                     Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    50             mAnimationScale.setDuration(3000);
    51 //            mAnimationScale = AnimationUtils.loadAnimation(mContext, R.anim.scale_animation);
    52             this.startAnimation(mAnimationScale);
    53             break;
    54         case KeyEvent.KEYCODE_DPAD_LEFT:                         //左键:Translate动画效果
    55             mAnimationTranslate = new TranslateAnimation(10, 100, 10, 100);
    56             mAnimationTranslate.setDuration(3000);
    57 //            mAnimationTranslate = AnimationUtils.loadAnimation(mContext, R.anim.translate_animation);
    58             this.startAnimation(mAnimationTranslate);
    59             break;
    60         case KeyEvent.KEYCODE_DPAD_RIGHT:                       //右键:Rotate动画效果
    61             mAnimationRotate = new RotateAnimation(0.0f, 360.0f, 
    62                     Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    63             mAnimationRotate.setDuration(3000);
    64 //            mAnimationRotate = AnimationUtils.loadAnimation(mContext, R.anim.rotate_animation);
    65             this.startAnimation(mAnimationRotate);
    66             break;
    67         }
    68         return true;
    69     }
    70     
    71     //按键弹起事件
    72     public boolean onKeyUp(int keyCode, KeyEvent event) {
    73         return false;
    74     }
    75 }

     

      alpha_animation.xml源代码如下:

    alpha_animation.xml源代码
    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 </set>

      scale_animation.xml源代码如下:

    scale_animation.xml源代码
     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.0"         
     7           android:fromYScale="0.0"
     8           android:toYScale="1.0"       
     9           android:pivotX="50%"
    10           android:pivotY="50%"          
    11           android:fillAfter="false"
    12           android:duration="500" 
    13     />
    14 </set>

      translate_animation.xml源代码如下:

    translate_animation.xml源代码
     1 <?xml version="1.0" encoding="utf-8"?>
     2 <set xmlns:android="http://schemas.android.com/apk/res/android">
     3     <translate
     4         android:fromXDelta="10"
     5         android:toXDelta="100"
     6         android:fromYDelta="10"
     7         android:toYDelta="100"
     8         android:duration="3000"
     9     />
    10 </set>

      rotate_animation.xml源代码如下:

    rotate_animation.xml源代码
     1 <?xml version="1.0" encoding="utf-8"?>
     2 <set xmlns:android="http://schemas.android.com/apk/res/android">
     3         
     4     <rotate 
     5         android:interpolator="@android:anim/accelerate_decelerate_interpolator"     
     6         android:fromDegrees="0" 
     7         android:toDegrees="+360"      
     8         android:pivotX="50%" 
     9         android:pivotY="50%"     
    10         android:duration="3000"
    11     />
    12 </set>

     4.实例(补充)

       在本实例中,首先在MainActivity.java中定义了四个Animation对象:mAnimation_alpha、mAnimation_scale、mAnimation_translate和mAnimation_rotate,分别表示透明度渐变动画对象、尺寸伸缩渐变动画对象、位置移动动画对象和画面旋转动画对象。并定义了四个Button对象,当点击这四个按钮时,可以分别运行上述四种不同的动画效果。该实例运行界面如图1所示。

    图1 效果图

      MainActivity.java源代码如下:

    MainActivity.java源代码
     1 package com.example.android_tweenanimation;
     2 
     3 import android.os.Bundle;
     4 import android.view.View;
     5 import android.view.animation.Animation;
     6 import android.view.animation.AnimationUtils;
     7 import android.widget.Button;
     8 import android.widget.ImageView;
     9 import android.app.Activity;
    10 
    11 public class MainActivity extends Activity {
    12 
    13     Animation mAnimation_alpha;          //透明度渐变动画对象
    14     Animation mAnimation_scale;           //尺寸伸缩渐变动画对象
    15     Animation mAnimation_translate;  //位置移动动画对象
    16     Animation mAnimation_rotate;        //画面旋转动画对象
    17     
    18     ImageView mImageView;                    //图像视图对象
    19     
    20     Button mButton_alpha;                         //透明度渐变按钮
    21     Button mButton_scale;                          //尺寸伸缩渐变按钮
    22     Button mButton_translate;                 //位置移动按钮
    23     Button mButton_rotate;                       //画面旋转按钮
    24     
    25     @Override
    26     public void onCreate(Bundle savedInstanceState) {
    27         super.onCreate(savedInstanceState);
    28         setContentView(R.layout.activity_main);    
    29         
    30         //加载动画效果
    31         mAnimation_alpha = AnimationUtils.loadAnimation(this, R.anim.alpha_animation);
    32         mAnimation_scale = AnimationUtils.loadAnimation(this, R.anim.scale_animation);
    33         mAnimation_translate = AnimationUtils.loadAnimation(this, R.anim.translate_animation);
    34         mAnimation_rotate = AnimationUtils.loadAnimation(this, R.anim.rotate_animation);
    35         
    36         //加载布局
    37         mImageView =(ImageView)this.findViewById(R.id.imageview);   
    38         mButton_alpha = (Button)this.findViewById(R.id.button_alpha);
    39         mButton_scale = (Button)this.findViewById(R.id.button_scale);    
    40         mButton_translate = (Button)this.findViewById(R.id.button_translate);
    41         mButton_rotate = (Button)this.findViewById(R.id.button_rotate);   
    42        
    43         //透明度渐变按钮事件监听
    44         mButton_alpha.setOnClickListener(new Button.OnClickListener() {
    45             public void onClick(View v) {
    46                 mImageView.startAnimation(mAnimation_alpha);
    47             }            
    48         });
    49         
    50         //尺寸伸缩渐变按钮事件监听
    51         mButton_scale.setOnClickListener(new Button.OnClickListener() {
    52             public void onClick(View v) {
    53                 mImageView.startAnimation(mAnimation_scale);
    54             }            
    55         });
    56         
    57         //位置移动按钮事件监听
    58         mButton_translate.setOnClickListener(new Button.OnClickListener() {
    59             public void onClick(View v) {
    60                 mImageView.startAnimation(mAnimation_translate);
    61             }            
    62         });
    63         
    64         //画面旋转按钮事件监听
    65         mButton_rotate.setOnClickListener(new Button.OnClickListener() {
    66             public void onClick(View v) {
    67                 mImageView.startAnimation(mAnimation_rotate);
    68             }            
    69         });
    70     }
    71 }

      对应的activity_main.xml源代码如下:

    activity_main.xml源代码
     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     xmlns:tools="http://schemas.android.com/tools"
     3     android:orientation="vertical"
     4     android:layout_width="match_parent"
     5     android:layout_height="match_parent" >
     6     
     7     <ImageView
     8         android:id="@+id/imageview"
     9         android:layout_marginLeft="25dp"
    10         android:layout_marginTop="50dp"
    11         android:layout_width="wrap_content"
    12         android:layout_height="wrap_content"
    13         android:src="@drawable/fuwa"
    14         android:contentDescription="fuwa"    />
    15     
    16     <LinearLayout 
    17         android:orientation="horizontal"
    18         android:layout_marginTop="50dp"
    19         android:layout_width="match_parent"
    20         android:layout_height="wrap_content"    >
    21         
    22         <Button 
    23             android:id="@+id/button_alpha"
    24             android:layout_weight="1"
    25             android:layout_width="0dp"
    26             android:layout_height="wrap_content"
    27             android:text="透明度渐变"    />
    28         
    29         <Button 
    30             android:id="@+id/button_scale"
    31             android:layout_weight="1"
    32             android:layout_width="0dp"
    33             android:layout_height="wrap_content"
    34             android:text="尺寸伸缩渐变"    />
    35         
    36     </LinearLayout>
    37     
    38     <LinearLayout 
    39         android:orientation="horizontal"
    40         android:layout_width="match_parent"
    41         android:layout_height="wrap_content"    >
    42         
    43         <Button 
    44             android:id="@+id/button_translate"
    45             android:layout_weight="1"
    46             android:layout_width="0dp"
    47             android:layout_height="wrap_content"
    48             android:text="画面位置移动"    />
    49         
    50         <Button 
    51             android:id="@+id/button_rotate"
    52             android:layout_weight="1"
    53             android:layout_width="0dp"
    54             android:layout_height="wrap_content"
    55             android:text="画面旋转"    />
    56         
    57     </LinearLayout>
    58     
    59 </LinearLayout>

    相关资料:

    Android Animation学习笔记 http://www.cnblogs.com/feisky/archive/2010/01/11/1644482.html

    分析Android动画模块 http://www.linuxgraphics.cn/animation/android_tween_animation.html

    Android中AnimationSet的使用 http://blog.csdn.net/yuzhiboyi/article/details/7731826

     

     

     

  • 相关阅读:
    python每日一题:使用套接字创建分布式进程
    市盈率分析
    python每日一题:分布式进程之坑点
    python每日一题:比较单线程,多线程,协程的运行效率
    python每日一题:锁知识点
    python每日一题:查找一篇文档中的人名和城市
    python之装饰器@
    python每日一题:利用字典实现超市购物程序
    【Java基础】多线程
    【Java基础】异常处理
  • 原文地址:https://www.cnblogs.com/menlsh/p/2829642.html
Copyright © 2020-2023  润新知