码迷，mamicode.com
首页 > 移动开发 > 详细

【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

时间：2015-03-31 10:44:12      阅读：228      评论：0      收藏：0      [点我收藏+]

标签：

Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。

第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。

 

下面就讲一下Tweene Animations。

 

主要类：

 

Animation   动画

AlphaAnimation 渐变透明度

RotateAnimation 画面旋转

ScaleAnimation 渐变尺寸缩放

TranslateAnimation 位置移动

AnimationSet  动画集

 

 

有了这些类，那么我们如何来实现动画效果呢？ 

 

以自定义View为例，该View很简单，画面上只有一个图片。 现在我们要对整个View分别实现各种Tween动画效果。

 

AlphaAnimation

 

通过代码实现 AlphaAnimation，如下：

 

[java] view plaincopyprint?
 
  1. //初始化  
  2. Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);  
  3. //设置动画时间            alphaAnimation.setDuration(3000);  
  4.                 this.startAnimation(alphaAnimation);  

 

 

其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度， 第二个参数toAlpha表示动画结束时的透明度。 

setDuration用来设置动画持续时间。

 

RotateAnimation

 

代码：

 

[java] view plaincopyprint?
 
  1. Animation rotateAnimation = new RotateAnimation(0f, 360f);  
  2.                 rotateAnimation.setDuration(1000);  
  3.                 this.startAnimation(rotateAnimation);  

 

 

其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度， 第二个参数toDegrees表示动画结束时的角度。 

另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

 

ScaleAnimation

代码：

 

[java] view plaincopyprint?
 
  1. //初始化  
  2. Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);  
  3. //设置动画时间  
  4. scaleAnimation.setDuration(500);  
  5.                 this.startAnimation(scaleAnimation);  

 

 

ScaleAnimation类中

第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。

第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。

另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

 

TranslateAnimation

代码：

 

[java] view plaincopyprint?
 
  1. //初始化  
  2. Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);  
  3. //设置动画时间                translateAnimation.setDuration(1000);  
  4.                             this.startAnimation(translateAnimation);  

 

 

TranslateAnimation类

 

第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。

第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。

 

参数详细说明：

 

表二
XML节点 功能说明
alpha 渐变透明度动画效果
<alpha
android:fromAlpha=”0.1″
android:toAlpha=”1.0″
android:duration=”3000″ />
fromAlpha

属性为动画起始时透明度

 0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之间的float数据类型的数字
toAlpha 属性为动画结束时透明度

表三
scale 渐变尺寸伸缩动画效果
<scale
android:interpolator= “@android:anim/accelerate_decelerate_interpolator”
android:fromXScale=”0.0″
android:toXScale=”1.4″
android:fromYScale=”0.0″
android:toYScale=”1.4″
android:pivotX=”50%”
android:pivotY=”50%”
android:fillAfter=”false”
android:startOffset=“700”
android:duration=”700″
android:repeatCount=”10″ />
fromXScale[float] fromYScale[float] 为动画起始时，X、Y坐标上的伸缩尺寸 0.0表示收缩到没有
1.0表示正常无伸缩
值小于1.0表示收缩
值大于1.0表示放大
toXScale [float]
toYScale[float]		 为动画结束时，X、Y坐标上的伸缩尺寸
pivotX[float]
pivotY[float]		 为动画相对于物件的X、Y坐标的开始位置 属性值说明：从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置
       

表四
translate 画面转换位置移动动画效果
<translate
android:fromXDelta=”30″
android:toXDelta=”-80″
android:fromYDelta=”30″
android:toYDelta=”300″
android:duration=”2000″ />
fromXDelta
toXDelta		 为动画、结束起始时 X坐标上的位置  
fromYDelta
toYDelta		 为动画、结束起始时 Y坐标上的位置  
       

表五
rotate 画面转移旋转动画效果
<rotate
android:interpolator=”@android:anim/accelerate_decelerate_interpolator”
android:fromDegrees=”0″
android:toDegrees=”+350″
android:pivotX=”50%”
android:pivotY=”50%”
android:duration=”3000″ />
fromDegrees 为动画起始时物件的角度 说明
当角度为负数——表示逆时针旋转
当角度为正数——表示顺时针旋转
(负数from——to正数:顺时针旋转)
(负数from——to负数:逆时针旋转)
(正数from——to正数:顺时针旋转)
(正数from——to负数:逆时针旋转)
toDegrees 属性为动画结束时物件旋转的角度 可以大于360度
pivotX
pivotY		 为动画相对于物件的X、Y坐标的开始位 说明：以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置
       

 

 

以上都是单独的使用某个动画，那么如何让多个动画同时生效呢？

 

答案是 AnimationSet。  

初看整个类名，还以为只是用来存放 Animation的一个Set， 细看才发现，该类也是继承自 Animation的。

 

下面我们实现一个动画，该动画会让图片移动的同时，图片透明度渐变，直接看代码吧。

 

[java] view plaincopyprint?
 
  1. //初始化 Translate动画  
  2. translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);  
  3. //初始化 Alpha动画  
  4. alphaAnimation = new AlphaAnimation(0.1f, 1.0f);  
  5.   
  6. //动画集  
  7. AnimationSet set = new AnimationSet(true);  
  8. set.addAnimation(translateAnimation);  
  9. set.addAnimation(alphaAnimation);  
  10.   
  11. //设置动画时间 (作用到每个动画)  
  12. set.setDuration(1000);  
  13. this.startAnimation(set);  

 

 

 

是不是觉得很简单呢？

 

 

附上整个View类的代码吧。

 

[java] view plaincopyprint?
 
  1. package com.yfz.view;  
  2. import com.yfz.R;  
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.drawable.BitmapDrawable;  
  6. import android.util.Log;  
  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.AnimationSet;  
  12. import android.view.animation.RotateAnimation;  
  13. import android.view.animation.ScaleAnimation;  
  14. import android.view.animation.TranslateAnimation;  
  15. public class TweenAnim extends View {  
  16.       
  17.     //Alpha动画 - 渐变透明度  
  18.     private Animation alphaAnimation = null;  
  19.       
  20.     //Sacle动画 - 渐变尺寸缩放  
  21.     private Animation scaleAnimation = null;  
  22.       
  23.     //Translate动画 - 位置移动  
  24.     private Animation translateAnimation = null;  
  25.       
  26.     //Rotate动画 - 画面旋转  
  27.     private Animation rotateAnimation = null;  
  28.       
  29.     public TweenAnim(Context context) {  
  30.         super(context);  
  31.     }  
  32.     @Override  
  33.     protected void onDraw(Canvas canvas) {  
  34.         super.onDraw(canvas);  
  35.         Log.e("Tween", "onDraw");  
  36.         //加载一个图片  
  37.         canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(), 0, 0, null);  
  38.     }  
  39.     @Override  
  40.     public boolean onKeyDown(int keyCode, KeyEvent event) {  
  41.         Log.e("Tween", "onKeyDown");  
  42.         return true;  
  43.     }  
  44.     @Override  
  45.     public boolean onKeyUp(int keyCode, KeyEvent event) {  
  46.         Log.e("Tween", "onKeyDown");  
  47.         switch (keyCode) {  
  48.             case KeyEvent.KEYCODE_DPAD_UP:  
  49.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");  
  50.                 alphaAnimation = new AlphaAnimation(0.1f, 1.0f);  
  51.                 //设置动画时间  
  52.                 alphaAnimation.setDuration(3000);  
  53.                 this.startAnimation(alphaAnimation);  
  54.                 break;  
  55.             case KeyEvent.KEYCODE_DPAD_DOWN:  
  56.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");  
  57.                 rotateAnimation = new RotateAnimation(0f, 360f);  
  58.                 rotateAnimation.setDuration(1000);  
  59.                 this.startAnimation(rotateAnimation);  
  60.                 break;  
  61.             case KeyEvent.KEYCODE_DPAD_LEFT:  
  62.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");  
  63.                 //初始化  
  64.                 scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);  
  65.                 //设置动画时间  
  66.                 scaleAnimation.setDuration(500);  
  67.                 this.startAnimation(scaleAnimation);  
  68.                 break;  
  69.             case KeyEvent.KEYCODE_DPAD_RIGHT:  
  70.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");  
  71.                 //初始化  
  72.                 translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);  
  73.                 //设置动画时间  
  74.                 translateAnimation.setDuration(1000);  
  75.                   
  76.                 this.startAnimation(translateAnimation);  
  77.                 break;  
  78.             case KeyEvent.KEYCODE_DPAD_CENTER:  
  79.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");  
  80.                 //初始化 Translate动画  
  81.                 translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);  
  82.                 //初始化 Alpha动画  
  83.                 alphaAnimation = new AlphaAnimation(0.1f, 1.0f);  
  84.                   
  85.                 //动画集  
  86.                 AnimationSet set = new AnimationSet(true);  
  87.                 set.addAnimation(translateAnimation);  
  88.                 set.addAnimation(alphaAnimation);  
  89.                   
  90.                 //设置动画时间 (作用到每个动画)  
  91.                 set.setDuration(1000);  
  92.                 this.startAnimation(set);  
  93.                 break;  
  94.             default:  
  95.                 break;  
  96.         }  
  97.         return true;  
  98.     }  
  99.       
  100. }  

 

 

 

在Activity中调用该类时，需要注意一定setFocusable(true)， 否则焦点在Activity上的话，onKeyUp方法是不会生效的。

调用该View的代码：

 

[java] view plaincopyprint?
 
  1. TweenAnim anim = new TweenAnim(Lesson_11.this);  
  2. anim.setFocusable(true);  
  3. setContentView(anim);  

 

 

 

 

 

 

上面通过Java代码，实现了4中不同的Tween动画，其实在Android中完全可以通过 XML文件来实现动画。这种方式可能更加简洁、清晰，也更利于重用。 

下面我们分别对这几种动画改用xml来实现。

 

首先是AlphaAnimation。

alpha_anim.xml：

 

[xhtml] view plaincopyprint?
 
  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="2000"  
  7.     />  
  8. </set>  

 

 

 

不用解释了吧。

 

RotateAnimation

rotate_anim.xml：

 

[xhtml] view plaincopyprint?
 
  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="360"  
  7.         android:pivotX="50%"  
  8.         android:pivotY="50%"  
  9.         android:duration="500"  
  10.     />  
  11. </set>  

 

 

 

 

ScaleAnimation

scale_anim.xml：

 

[xhtml] view plaincopyprint?
 
  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>  

 

 

 

TranslateAnimation

translate_anim.xml：

 

 

[xhtml] view plaincopyprint?
 
  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.     />  
  9. </set>  

 

 

 

布局文件都已经写完，那么如何来使用这些文件呢？

 

其实也很简单，此时需要用到AnimationUtils类。 通过该类中 loadAnimation 方法来加载这些布局文件。

如：

 

[java] view plaincopyprint?
 
  1. rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);  

 

 

 

这次View类的代码如下：

 

[java] view plaincopyprint?
 
  1. package com.yfz.view;  
  2. import com.yfz.R;  
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.drawable.BitmapDrawable;  
  6. import android.util.Log;  
  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.AnimationSet;  
  12. import android.view.animation.AnimationUtils;  
  13. import android.view.animation.RotateAnimation;  
  14. import android.view.animation.ScaleAnimation;  
  15. import android.view.animation.TranslateAnimation;  
  16. public class TweenAnim2 extends View {  
  17.       
  18.     //Alpha动画 - 渐变透明度  
  19.     private Animation alphaAnimation = null;  
  20.       
  21.     //Sacle动画 - 渐变尺寸缩放  
  22.     private Animation scaleAnimation = null;  
  23.       
  24.     //Translate动画 - 位置移动  
  25.     private Animation translateAnimation = null;  
  26.       
  27.     //Rotate动画 - 画面旋转  
  28.     private Animation rotateAnimation = null;  
  29.       
  30.     public TweenAnim2(Context context) {  
  31.         super(context);  
  32.     }  
  33.     @Override  
  34.     protected void onDraw(Canvas canvas) {  
  35.         super.onDraw(canvas);  
  36.         Log.e("Tween", "onDraw");  
  37.         //加载一个图片  
  38.         canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(), 0, 0, null);  
  39.     }  
  40.     @Override  
  41.     public boolean onKeyDown(int keyCode, KeyEvent event) {  
  42.         Log.e("Tween", "onKeyDown");  
  43.         return true;  
  44.     }  
  45.     @Override  
  46.     public boolean onKeyUp(int keyCode, KeyEvent event) {  
  47.         Log.e("Tween", "onKeyDown");  
  48.         switch (keyCode) {  
  49.             case KeyEvent.KEYCODE_DPAD_UP:  
  50.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");  
  51.                   
  52.                 alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);  
  53.                   
  54.                 this.startAnimation(alphaAnimation);  
  55.                 break;  
  56.             case KeyEvent.KEYCODE_DPAD_DOWN:  
  57.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");  
  58.                   
  59.                 rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);  
  60.                   
  61.                 this.startAnimation(rotateAnimation);  
  62.                 break;  
  63.             case KeyEvent.KEYCODE_DPAD_LEFT:  
  64.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");  
  65.                   
  66.                 scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);  
  67.                   
  68.                 this.startAnimation(scaleAnimation);  
  69.                 break;  
  70.             case KeyEvent.KEYCODE_DPAD_RIGHT:  
  71.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");  
  72.                   
  73.                 translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);  
  74.                   
  75.                 this.startAnimation(translateAnimation);  
  76.                 break;  
  77.             case KeyEvent.KEYCODE_DPAD_CENTER:  
  78.                 Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");  
  79.                 //初始化 Translate动画  
  80.                 translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);  
  81.                   
  82.                 //初始化 Alpha动画  
  83.                 alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);  
  84.                   
  85.                 //动画集  
  86.                 AnimationSet set = new AnimationSet(true);  
  87.                 set.addAnimation(translateAnimation);  
  88.                 set.addAnimation(alphaAnimation);  
  89.                   
  90.                 //设置动画时间 (作用到每个动画)  
  91.                 set.setDuration(1000);  
  92.                 this.startAnimation(set);  
  93.                 break;  
  94.             default:  
  95.                 break;  
  96.         }  
  97.         return true;  
  98.     }  
  99.       
  100. }  

 

【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

标签：

原文地址：http://www.cnblogs.com/Free-Thinker/p/4380002.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！