【Android动画】之Tween动画 (渐变、缩放、位移、旋转)Android 平台提供了两类动画。 一类是Tween动画,就是对场
【Android动画】之Tween动画 (渐变、缩放、位移、旋转)
Android 平台提供了两类动画。 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变)。
第二类就是 Frame动画,即顺序的播放事先做好的图像,与gif图片原理类似。
?
下面就讲一下Tweene Animations。
?
主要类:
?
Animation ?动画
AlphaAnimation渐变透明度
RotateAnimation画面旋转
ScaleAnimation渐变尺寸缩放
TranslateAnimation位置移动
AnimationSet?动画集
?
?
有了这些类,那么我们如何来实现动画效果呢??
?
以自定义View为例,该View很简单,画面上只有一个图片。 现在我们要对整个View分别实现各种Tween动画效果。
?
AlphaAnimation
?
通过代码实现?AlphaAnimation,如下:
?
[java]?view plaincopyprint?
- //初始化??
- Animation?alphaAnimation?=?new?AlphaAnimation(0.1f,?1.0f);??
- //设置动画时间????????????alphaAnimation.setDuration(3000);??
- ????????????????this.startAnimation(alphaAnimation);??
?
?
其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度, 第二个参数toAlpha表示动画结束时的透明度。?
setDuration用来设置动画持续时间。
?
RotateAnimation
代码:
?
[java]?view plaincopyprint?
- Animation?rotateAnimation?=?new?RotateAnimation(0f,?360f);??
- ????????????????rotateAnimation.setDuration(1000);??
- ????????????????this.startAnimation(rotateAnimation);??
?
?
其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度, 第二个参数toDegrees表示动画结束时的角度。?
另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。
?
ScaleAnimation
代码:
?
[java]?view plaincopyprint?
- //初始化??
- Animation?scaleAnimation?=?new?ScaleAnimation(0.1f,?1.0f,0.1f,1.0f);??
- //设置动画时间??
- scaleAnimation.setDuration(500);??
- ????????????????this.startAnimation(scaleAnimation);??
?
?
ScaleAnimation类中
第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。
第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。
另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。
?
TranslateAnimation
代码:
?
[java]?view plaincopyprint?
- //初始化??
- Animation?translateAnimation?=?new?TranslateAnimation(0.1f,?100.0f,0.1f,100.0f);??
- //设置动画时间????????????????translateAnimation.setDuration(1000);??
- ????????????????????????????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?
- //初始化?Translate动画??
- translateAnimation?=?new?TranslateAnimation(0.1f,?100.0f,0.1f,100.0f);??
- //初始化?Alpha动画??
- alphaAnimation?=?new?AlphaAnimation(0.1f,?1.0f);??
- ??
- //动画集??
- AnimationSet?set?=?new?AnimationSet(true);??
- set.addAnimation(translateAnimation);??
- set.addAnimation(alphaAnimation);??
- ??
- //设置动画时间?(作用到每个动画)??
- set.setDuration(1000);??
- this.startAnimation(set);??
?
?
?
是不是觉得很简单呢?
?
?
附上整个View类的代码吧。
?
[java]?view plaincopyprint?
- package?com.yfz.view;??
- import?com.yfz.R;??
- import?android.content.Context;??
- import?android.graphics.Canvas;??
- import?android.graphics.drawable.BitmapDrawable;??
- import?android.util.Log;??
- import?android.view.KeyEvent;??
- import?android.view.View;??
- import?android.view.animation.AlphaAnimation;??
- import?android.view.animation.Animation;??
- import?android.view.animation.AnimationSet;??
- import?android.view.animation.RotateAnimation;??
- import?android.view.animation.ScaleAnimation;??
- import?android.view.animation.TranslateAnimation;??
- public?class?TweenAnim?extends?View?{??
- ??????
- ????//Alpha动画?-?渐变透明度??
- ????private?Animation?alphaAnimation?=?null;??
- ??????
- ????//Sacle动画?-?渐变尺寸缩放??
- ????private?Animation?scaleAnimation?=?null;??
- ??????
- ????//Translate动画?-?位置移动??
- ????private?Animation?translateAnimation?=?null;??
- ??????
- ????//Rotate动画?-?画面旋转??
- ????private?Animation?rotateAnimation?=?null;??
- ??????
- ????public?TweenAnim(Context?context)?{??
- ????????super(context);??
- ????}??
- ????@Override??
- ????protected?void?onDraw(Canvas?canvas)?{??
- ????????super.onDraw(canvas);??
- ????????Log.e("Tween",?"onDraw");??
- ????????//加载一个图片??
- ????????canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(),?0,?0,?null);??
- ????}??
- ????@Override??
- ????public?boolean?onKeyDown(int?keyCode,?KeyEvent?event)?{??
- ????????Log.e("Tween",?"onKeyDown");??
- ????????return?true;??
- ????}??
- ????@Override??
- ????public?boolean?onKeyUp(int?keyCode,?KeyEvent?event)?{??
- ????????Log.e("Tween",?"onKeyDown");??
- ????????switch?(keyCode)?{??
- ????????????case?KeyEvent.KEYCODE_DPAD_UP:??
- ????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_UP");??
- ????????????????alphaAnimation?=?new?AlphaAnimation(0.1f,?1.0f);??
- ????????????????//设置动画时间??
- ????????????????alphaAnimation.setDuration(3000);??
- ????????????????this.startAnimation(alphaAnimation);??
- ????????????????break;??
- ????????????case?KeyEvent.KEYCODE_DPAD_DOWN:??
- xml?version="1.0"?encoding="utf-8"?>??
- <set?xmlns:android="http://schemas.android.com/apk/res/android">??
- ????<translate??
- ????????android:fromXDelta="10"??
- ????????android:toXDelta="100"??
- ????????android:fromYDelta="10"??
- ????????android:toYDelta="100"??
- ????/>??
- </set>??
?
?
?
布局文件都已经写完,那么如何来使用这些文件呢?
?
其实也很简单,此时需要用到AnimationUtils类。 通过该类中?loadAnimation 方法来加载这些布局文件。
如:
?
[java]?view plaincopyprint?
- rotateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.rotate_anim);??
?
?
?
这次View类的代码如下:
?
[java]?view plaincopyprint?
- package?com.yfz.view;??
- import?com.yfz.R;??
- import?android.content.Context;??
- import?android.graphics.Canvas;??
- import?android.graphics.drawable.BitmapDrawable;??
- import?android.util.Log;??
- import?android.view.KeyEvent;??
- import?android.view.View;??
- import?android.view.animation.AlphaAnimation;??
- import?android.view.animation.Animation;??
- import?android.view.animation.AnimationSet;??
- import?android.view.animation.AnimationUtils;??
- import?android.view.animation.RotateAnimation;??
- import?android.view.animation.ScaleAnimation;??
- import?android.view.animation.TranslateAnimation;??
- public?class?TweenAnim2?extends?View?{??
- ??????
- ????//Alpha动画?-?渐变透明度??
- ????private?Animation?alphaAnimation?=?null;??
- ??????
- ????//Sacle动画?-?渐变尺寸缩放??
- ????private?Animation?scaleAnimation?=?null;??
- ??????
- ????//Translate动画?-?位置移动??
- ????private?Animation?translateAnimation?=?null;??
- ??????
- ????//Rotate动画?-?画面旋转??
- ????private?Animation?rotateAnimation?=?null;??
- ??????
- ????public?TweenAnim2(Context?context)?{??
- ????????super(context);??
- ????}??
- ????@Override??
- ????protected?void?onDraw(Canvas?canvas)?{??
- ????????super.onDraw(canvas);??
- ????????Log.e("Tween",?"onDraw");??
- ????????//加载一个图片??
- ????????canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(),?0,?0,?null);??
- ????}??
- ????@Override??
- ????public?boolean?onKeyDown(int?keyCode,?KeyEvent?event)?{??
- ????????Log.e("Tween",?"onKeyDown");??
- ????????return?true;??
- ????}??
- ????@Override??
- ????public?boolean?onKeyUp(int?keyCode,?KeyEvent?event)?{??
- ????????Log.e("Tween",?"onKeyDown");??
- ????????switch?(keyCode)?{??
- ????????????case?KeyEvent.KEYCODE_DPAD_UP:??
- ????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_UP");??
- ??????????????????
- ????????????????alphaAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.alpha_anim);??
- ??????????????????
- ????????????????this.startAnimation(alphaAnimation);??
- ????????????????break;??
- ????????????case?KeyEvent.KEYCODE_DPAD_DOWN:??
- ????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_DOWN");??
- ??????????????????
- ????????????????rotateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.rotate_anim);??
- ??????????????????
- ????????????????this.startAnimation(rotateAnimation);??
- ????????????????break;??
- ????????????case?KeyEvent.KEYCODE_DPAD_LEFT:??
- ????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_LEFT");??
- ??????????????????
- ????????????????scaleAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.scale_anim);??
- ??????????????????
- ????????????????this.startAnimation(scaleAnimation);??
- ????????????????break;??
- ????????????case?KeyEvent.KEYCODE_DPAD_RIGHT:??
- ????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_RIGHT");??
- ??????????????????
- ????????????????translateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.translate_anim);??
- ??????????????????
- ????????????????this.startAnimation(translateAnimation);??
- ????????????????break;??
- ????????????case?KeyEvent.KEYCODE_DPAD_CENTER:??
- ????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_CENTER");??
- ????????????????//初始化?Translate动画??
- ????????????????translateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.translate_anim);??
- ??????????????????
- ????????????????//初始化?Alpha动画??
- ????????????????alphaAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.alpha_anim);??
- ??????????????????
- ????????????????//动画集??
- ????????????????AnimationSet?set?=?new?AnimationSet(true);??
- ????????????????set.addAnimation(translateAnimation);??
- ????????????????set.addAnimation(alphaAnimation);??
- ??????????????????
- ????????????????//设置动画时间?(作用到每个动画)??
- ????????????????set.setDuration(1000);??
- ????????????????this.startAnimation(set);??
- ????????????????break;??
- ????????????default:??
- ????????????????break;??
- ????????}??
- ????????return?true;??
- ????}??
- ??????
- }??
?
?