歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> Android中的動畫效果學習

Android中的動畫效果學習

日期:2017/3/1 10:49:39   编辑:Linux編程
在Android中系統給我們提供了兩種實現動畫效果的方法,其中一種是Tween,還有一種是Frame動畫;

Tween動畫中,我們可以通過Tween動畫去使得視圖實現視圖放大,縮小,旋轉,漸變等等功能;這個動畫類在android.view.animation包下面,

主要為我們提供以下的一些常用方法:(【注】以下對於些類的解釋說明,是我看文檔自己翻譯的,可能有些地方不准確,也算是自己作為學習英語的機會,還請大家見諒一下哈)

Animation 這是動畫的抽象類,其他的幾個實現的動畫類繼承這個類

AnimationSet這是動畫的屬性的集合類

AnimationUtils 這個類是定義動畫工具類

AlphaAnimation 這個類可以對動畫的透明度進行控制

RotateAnimation 這個類可以對動畫的旋轉的位置進行控制
ScaleAnimation 這個類可以對動畫的大小進行控制

TranslateAnimation 這個類可以對動畫位置進行控制

下面是Twwen動畫的一些常用動畫實現類的說明

AlphaAnimation 類(漸變調整透明度)常用的構造方法
AlphaAnimation(float fromAlpha, float toAlpha)
參數說明:

float fromAlpha :動畫剛開始的透明度 ,

float toAlpha:動畫結束的透明度 取值范圍是(0.0到1.0,;0.0代表不透明,1.0代表完全透明)


RoateAnimation 類 (動畫旋轉) 常用的構造方法
RotateAnimation(float fromDegrees, float toDegrees),
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY),
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
參數說明:fromDegrees:開始旋轉的角度,.toDegrees:結束旋轉的角度
.pivotXType:在X坐標方向的伸縮的方式,pivotYType:在Y坐標方向的伸縮方式;
pivotXValue:在X坐標方向的伸縮值,pivotYValue:在Y坐標方向的伸縮值


ScaleAnimation 類(動畫大小的控制類) 常用的構造方法
ScaleAnimation(float fromX, float toX, float fromY, float toY)
ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
參數說明:fromX: 起始的X坐標,toX:結束的X坐標,fromY:起始的Y坐標,toY:結束的Y坐標
.pivotXType:在X坐標方向的伸縮的方式,pivotYType:在Y坐標方向的伸縮方式;
pivotXValue:在X坐標方向的伸縮值,pivotYValue:在Y坐標方向的伸縮值

TranslateAnimation類(動畫位置控制) 常用的構造方法
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
參數說明: fromXDelta:起始的X坐標;toXDelta:結束的X坐標
fromYDelta:起始的Y坐標,toYDelta:結束的Y坐標

要實現Twwen動畫的效果,有兩種辦法 第一個種是直接在代碼中進行設置,第二種是在XML文件進行配置;

首先下看下直接編碼設置的辦法:

Demo源代碼如下:

  1. package com.android.animation;
  2. import com.android.R;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.view.animation.AlphaAnimation;
  8. import android.view.animation.Animation;
  9. import android.view.animation.RotateAnimation;
  10. import android.view.animation.ScaleAnimation;
  11. import android.view.animation.TranslateAnimation;
  12. import android.widget.Button;
  13. import android.widget.ImageView;
  14. public class Demo_Animation extends Activity {
  15. // 定義四個按鈕,分別對用四種動畫效果操作
  16. private Button alpha, roate, scale, translate;
  17. // 聲明ImageView組件
  18. private ImageView animation_test;
  19. @Override
  20. protected void onCreate(Bundle savedInstanceState) {
  21. super.onCreate(savedInstanceState);
  22. setContentView(R.layout.animation);
  23. animation_test = (ImageView) this.findViewById(R.id.test_animation);
  24. alpha = (Button) this.findViewById(R.id.alpha);
  25. roate = (Button) this.findViewById(R.id.roate);
  26. scale = (Button) this.findViewById(R.id.scale);
  27. translate = (Button) this.findViewById(R.id.translate);
  28. // 為按鈕組件添加監聽事件
  29. alpha.setOnClickListener(new OnClickListener() {
  30. @Override
  31. public void onClick(View v) {
  32. // 創建漸變的 AlphaAnimation()構造方法中 參數要加 f 因為是浮點型的
  33. Animation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
  34. // 設置畫面漸變的時間 單位:毫秒 本實例設置為3 s
  35. alphaAnimation.setDuration(3000);
  36. // 為圖片添加效果,開始動畫
  37. animation_test.setAnimation(alphaAnimation);
  38. }
  39. });
  40. roate.setOnClickListener(new OnClickListener() {
  41. /**
  42. * 其中有設置旋轉的伸縮的方法 有
  43. *
  44. * @author jiangqq ①:Animation.RELATIVE_TO_SELF
  45. * @author jiangqq ②:Animation.RELATIVE_TO_PARENT
  46. * @author jiangqq ③:Animation.ABSOLUTE
  47. */
  48. @Override
  49. public void onClick(View v) {
  50. // 設置旋轉
  51. Animation roateAnimation = new RotateAnimation(0f, +180f,
  52. Animation.RELATIVE_TO_SELF, 1.0f,
  53. Animation.RELATIVE_TO_SELF, 1.0f);
  54. // 設置畫面漸變的時間 單位:毫秒 本實例設置為3 s
  55. roateAnimation.setDuration(3000);
  56. // 為圖片添加效果,開始動畫
  57. animation_test.setAnimation(roateAnimation);
  58. }
  59. });
  60. scale.setOnClickListener(new OnClickListener() {
  61. /**
  62. * 其中沿X軸與Y軸的伸縮方式的三種模式 在上面roate監聽類方法中有說明了
  63. */
  64. @Override
  65. public void onClick(View v) {
  66. Animation scaleAnimation = new ScaleAnimation(0.0f, 1.0f, 0.0f,
  67. 1.0f, Animation.RELATIVE_TO_SELF, 1.5f,
  68. Animation.RELATIVE_TO_SELF, 1.5f);
  69. // 設置畫面漸變的時間 單位:毫秒 本實例設置為3 s
  70. scaleAnimation.setDuration(3000);
  71. // 為圖片添加效果,開始動畫
  72. animation_test.setAnimation(scaleAnimation);
  73. }
  74. });
  75. translate.setOnClickListener(new OnClickListener() {
  76. /**
  77. * 位置變化
  78. */
  79. @Override
  80. public void onClick(View v) {
  81. Animation translateAnimation = new TranslateAnimation(0.0f,
  82. 15.0f, 0.0f, 15.0f);
  83. // 設置畫面漸變的時間 單位:毫秒 本實例設置為3 s
  84. translateAnimation.setDuration(3000);
  85. // 為圖片添加效果,開始動畫
  86. animation_test.setAnimation(translateAnimation);
  87. }
  88. });
  89. }
  90. }
  1. </pre><p></p><p><span style="font-size:16px;">布局文件如下:</span></p><p><span style="font-size:16px;"> </span></p><p><span style="font-size:16px;"></span></p><p><span style="font-size:16px;"></span></p><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical" >
  6. <ImageView
  7. android:id="@+id/test_animation"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:src="@drawable/animation_test" />
  11. <LinearLayout
  12. xmlns:android="http://schemas.android.com/apk/res/android"
  13. android:layout_width="match_parent"
  14. android:layout_height="match_parent"
  15. android:layout_marginTop="20dip" >
  16. <Button
  17. android:id="@+id/alpha"
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:text="alpha" />
  21. <Button
  22. android:id="@+id/roate"
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:text="roate" />
  26. <Button
  27. android:id="@+id/scale"
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:text="scale" />
  31. <Button
  32. android:id="@+id/translate"
  33. android:layout_width="wrap_content"
  34. android:layout_height="wrap_content"
  35. android:text="translate" />
  36. </LinearLayout>
  37. </LinearLayout>
效果截圖:

Copyright © Linux教程網 All Rights Reserved