• 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 基础2.5 循环中continue与breake用法
    python 基础 2.4 while 循环
    python 基础 2.3 for 循环
    python 基础 2.2 if流程控制(二)
    python 基础 2.1 if 流程控制(一)
    python 基础 1.6 python 帮助信息及数据类型间相互转换
    python 基础 1.5 python数据类型(四)--字典常用方法示例
    Tornado Web 框架
    LinkCode 第k个排列
    LeetCode 46. Permutations
  • 原文地址:https://www.cnblogs.com/menlsh/p/2829642.html
Copyright © 2020-2023  润新知