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

XML 前端之家
前端之家收集整理的这篇文章主要介绍了【Android动画】之Tween动画 (渐变、缩放、位移、旋转)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

下面就讲一下Tweene Animations。

主要类：

Animation 动画

AlphaAnimation 渐变透明度

RotateAnimation 画面旋转

ScaleAnimation 渐变尺寸缩放

TranslateAnimation 位置移动

AnimationSet 动画集

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

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

AlphaAnimation

通过代码实现AlphaAnimation，如下：

[java] view plain copy print ?
  1. //初始化
  2. AnimationalphaAnimation=newAlphaAnimation(0.1f,1.0f);
  3. //设置动画时间alphaAnimation.setDuration(3000);
  4. this.startAnimation(alphaAnimation);

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

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

RotateAnimation


代码：

?
    AnimationrotateAnimation=newRotateAnimation(0f,360f);
  1. rotateAnimation.setDuration(1000);
  2. this.startAnimation(rotateAnimation);

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

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

ScaleAnimation

代码：

?
    AnimationscaleAnimation=newScaleAnimation(1.0f,0); background-color:inherit">//设置动画时间
  1. scaleAnimation.setDuration(500);
  2. this.startAnimation(scaleAnimation);

ScaleAnimation类中

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

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

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

TranslateAnimation

代码：

?
    AnimationtranslateAnimation=newTranslateAnimation(100.0f,0); background-color:inherit">100.0f);
  1. //设置动画时间translateAnimation.setDuration(1000);
  2. 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的。

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

?
    //初始化Translate动画
  1. translateAnimation=newTranslateAnimation(//初始化Alpha动画
  2. alphaAnimation=newAlphaAnimation(
  3. //动画集
  4. AnimationSetset=newAnimationSet(true);
  5. set.addAnimation(translateAnimation);
  6. set.addAnimation(alphaAnimation);
  8. //设置动画时间(作用到每个动画)
  9. set.setDuration( this.startAnimation(set);

是不是觉得很简单呢？

附上整个View类的代码吧。

?
    packagecom.yfz.view;
  1. importcom.yfz.R;
  2. importandroid.content.Context;
  3. importandroid.graphics.Canvas;
  4. importandroid.graphics.drawable.BitmapDrawable;
  5. importandroid.util.Log;
  6. importandroid.view.KeyEvent;
  7. importandroid.view.View;
  8. importandroid.view.animation.AlphaAnimation;
  9. importandroid.view.animation.Animation;
  10. importandroid.view.animation.AnimationSet;
  11. importandroid.view.animation.RotateAnimation;
  12. importandroid.view.animation.ScaleAnimation;
  13. importandroid.view.animation.TranslateAnimation;
  14. publicclassTweenAnimextendsView{
  15. //Alpha动画-渐变透明度
  16. privateAnimationalphaAnimation=null;
  17. //Sacle动画-渐变尺寸缩放
  18. privateAnimationscaleAnimation=null;
  19. //Translate动画-位置移动
  20. privateAnimationtranslateAnimation=null;
  21. //Rotate动画-画面旋转
  22. privateAnimationrotateAnimation=null;
  23. publicTweenAnim(Contextcontext){
  24. super(context);
  25. }
  26. @Override
  27. protectedvoidonDraw(Canvascanvas){
  28. super.onDraw(canvas);
  29. Log.e("Tween","onDraw");
  30. //加载一个图片
  31. canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(),0,null);
  32. }
  33. @Override
  34. publicbooleanonKeyDown(intkeyCode,KeyEventevent){
  35. "onKeyDown");
  36. returntrue;
  37. publicbooleanonKeyUp(intkeyCode,KeyEventevent){
  38. Log.e("Tween","onKeyDown");
  39. switch(keyCode){
  40. caseKeyEvent.KEYCODE_DPAD_UP:
  41. "onKeyDown-KEYCODE_DPAD_UP");
  42. alphaAnimation.setDuration(3000);
  43. this.startAnimation(alphaAnimation);
  44. break;
  45. caseKeyEvent.KEYCODE_DPAD_DOWN:
  46. "onKeyDown-KEYCODE_DPAD_DOWN");
  47. rotateAnimation=newRotateAnimation(0f,153); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> this.startAnimation(rotateAnimation);
  48. caseKeyEvent.KEYCODE_DPAD_LEFT:
  49. "onKeyDown-KEYCODE_DPAD_LEFT");
  50. scaleAnimation=newScaleAnimation( this.startAnimation(scaleAnimation);
  51. caseKeyEvent.KEYCODE_DPAD_RIGHT:
  52. "onKeyDown-KEYCODE_DPAD_RIGHT");
  53. translateAnimation.setDuration( this.startAnimation(translateAnimation);
  54. break;
  55. caseKeyEvent.KEYCODE_DPAD_CENTER:
  56. "onKeyDown-KEYCODE_DPAD_CENTER");
  57. //初始化Translate动画
  58. translateAnimation=newTranslateAnimation(100.0f);
  59. //初始化Alpha动画
  60. alphaAnimation=newAlphaAnimation(1.0f);
  61. //动画集
  62. AnimationSetset=newAnimationSet(true);
  63. set.addAnimation(translateAnimation);
  64. set.addAnimation(alphaAnimation);
  65. //设置动画时间(作用到每个动画)
  66. set.setDuration(1000);
  67. this.startAnimation(set);
  68. default:
  69. returntrue;
  70. }

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

调用该View的代码：

?
    TweenAnimanim=newTweenAnim(Lesson_11.this);
  1. anim.setFocusable(true);
  2. setContentView(anim);

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

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

首先是AlphaAnimation。

alpha_anim.xml：

[xhtml]view plaincopyprint? @H_404_1328@
    <?xmlversion="1.0"encoding="utf-8"?>
  1. <setxmlns:android="http://schemas.android.com/apk/res/android">
  2. <alpha
  3. android:fromAlpha="0.1"
  4. android:toAlpha="1.0"
  5. android:duration="2000"
  6. />
  7. </set>

不用解释了吧。

RotateAnimation

rotate_anim.xml：

[xhtml] ?
    <?xmlversion="1.0"encoding="utf-8"?>
  1. <setxmlns:android="http://schemas.android.com/apk/res/android">
  2. <rotate
  3. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  4. android:fromDegrees="0"
  5. android:toDegrees="360"
  6. android:pivotX="50%"
  7. android:pivotY="50%"
  8. android:duration="500"
  9. />
  10. </set>

ScaleAnimation

scale_anim.xml：

?
    <scale
  1. android:fromXScale="0.0"
  2. android:toXScale="1.0"
  3. android:fromYScale="0.0"
  4. android:toYScale="1.0"
  5. android:fillAfter="false"
  6. android:duration="500"
  7. />
  8. </set>

TranslateAnimation

translate_anim.xml：

?
    <translate
  1. android:fromXDelta="10"
  2. android:toXDelta="100"
  3. android:fromYDelta="10"
  4. android:toYDelta="100"
  5. </set>

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

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

如：

?
    rotateAnimation=AnimationUtils.loadAnimation(this.getContext(),R.anim.rotate_anim);

这次View类的代码如下：

?
    importandroid.view.animation.AnimationUtils;
  1. importandroid.view.animation.RotateAnimation;
  2. importandroid.view.animation.ScaleAnimation;
  3. importandroid.view.animation.TranslateAnimation;
  4. publicclassTweenAnim2extendsView{
  5. //Alpha动画-渐变透明度
  6. privateAnimationalphaAnimation=null;
  7. //Sacle动画-渐变尺寸缩放
  8. privateAnimationscaleAnimation=null;
  9. //Translate动画-位置移动
  10. privateAnimationtranslateAnimation=null;
  11. //Rotate动画-画面旋转
  12. privateAnimationrotateAnimation=null;
  13. publicTweenAnim2(Contextcontext){
  14. super(context);
  15. protectedvoidonDraw(Canvascanvas){
  16. super.onDraw(canvas);
  17. "onDraw");
  18. //加载一个图片
  19. canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(),null);
  20. publicbooleanonKeyDown(intkeyCode,248)"> publicbooleanonKeyUp(intkeyCode,248)"> switch(keyCode){
  21. caseKeyEvent.KEYCODE_DPAD_UP:
  22. "onKeyDown-KEYCODE_DPAD_UP");
  23. alphaAnimation=AnimationUtils.loadAnimation(this.getContext(),R.anim.alpha_anim);
  24. this.startAnimation(alphaAnimation);
  25. caseKeyEvent.KEYCODE_DPAD_DOWN:
  26. "onKeyDown-KEYCODE_DPAD_DOWN");
  27. rotateAnimation=AnimationUtils.loadAnimation(this.getContext(),R.anim.rotate_anim);
  28. scaleAnimation=AnimationUtils.loadAnimation(this.getContext(),R.anim.scale_anim);
  29. this.startAnimation(scaleAnimation);
  30. caseKeyEvent.KEYCODE_DPAD_RIGHT:
  31. "onKeyDown-KEYCODE_DPAD_RIGHT");
  32. translateAnimation=AnimationUtils.loadAnimation(this.getContext(),R.anim.translate_anim);
  33. this.startAnimation(translateAnimation);
  34. caseKeyEvent.KEYCODE_DPAD_CENTER:
  35. "onKeyDown-KEYCODE_DPAD_CENTER");
  36. translateAnimation=AnimationUtils.loadAnimation(this.getContext(),R.anim.translate_anim);
  37. alphaAnimation=AnimationUtils.loadAnimation(this.getContext(),R.anim.alpha_anim);
  38. }

好了，本次就这么多。

转载自:http://www.jb51.cc/article/p-dxkhdppb-pt.html

原文链接：https://www.f2er.com/xml/297182.html

猜你在找的XML相关文章

10分钟掌握XML、JSON及其解析
引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技术都是为了满足人的生产生活需要而...
[CXF REST标准实战系列] 一、JAXB xml与javaBean的转换
Writer：BYSocket（泥沙砖瓦浆木匠） 微博：BYSocket 豆瓣：BYSocket Reprint it anywhere...
[CXF REST标准实战系列] 一、JAXB xml与javaBean的转换
Writer：BYSocket（泥沙砖瓦浆木匠） 微博：BYSocket 豆瓣：BYSocket Reprint it anywhere...
10分钟掌握XML、JSON及其解析
http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技...
自定义圆形控件RoundImageView并认识一下attr.xml
(点击上方公众号，可快速关注) 公众号：smart_android 作者：耿广龙｜loonggg 点击“阅读原...
10分钟掌握XML、JSON及其解析
引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技术都是为了满足人的生产生活需要而...
10分钟掌握XML、JSON及其解析(上)
 (点击上方公众号，可快速关注) 来源： Long Luo 的博客 链接：http://longluo.github.i...
10分钟掌握XML、JSON及其解析(中)
接上文 二、JSON XML很好很强大，但是最近有另外一个时代弄潮儿，这就是JSON。现在JSON的光...
10分钟掌握XML、JSON及其解析(下)
接上文 2.4 如何解析JSON？ Android JSON所有相关类，都在org.json包下。 包括JSONObject、...
10分钟掌握XML、JSON及其解析
原文出处：  Long Luo 的博客（@Long_Luo）   引言 NOKIA 有句著名的广告语：“科技以人...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作