碼上快樂

相關內容    簡體    繁體

Android--Tween補間動畫

本文轉載自   查看原文   2013-12-04 07:30   3651    RotateAnimation/ android/ Animation/ TranslateAnimation/ Tween/ AnimationSet/ AlphaAnimation/ Android/ ScaleAnimation

前言

　　Android除了支持逐幀動畫之外，也提供了對補間動畫的支持，補間動畫就是指開發人員只需要指定動畫的開始、動畫結束的"關鍵幀"，而動畫變化的"中間幀"由系統計算並補齊。本篇博客就講解如何在Android下使用補間動畫，最后將以簡單的Demo來演示。

　　本篇博客的主要內容：

  1. Animation
  2. AlphaAnimation
  3. RotateAnimation
  4. ScaleAnimation
  5. TranslateAnimation
  6. AnimationSet
  7. Animation變化坐標點的參照類型
  8. Animation的Interpolator

 

Animation

　　在Android中使用Tween補間動畫需要得到Animation的支持，它處於"android.view.animation.Animation"包下，是一個抽象類，其中抽象了一些動畫必須的方法，其子類均有對其進行實現，而在Android下完成補間動畫也就是在操作Animation的幾個子類。

　　補間動畫和逐幀動畫一樣，可以使用XML資源文件定義，也可以使用Java代碼定義。下面提供一些常用Animation中定義的屬性，同樣都提供了XML屬性以及對應的方法，它們主要用來設定補間動畫的一些效果：

  • android:duration/setDuration(long)：動畫單次播放時間。
  • android:fillAfter/setFillAfter(boolean)：動畫是否保持播放結束位置。
  • android:fillBefore/setFillBefore(boolean)：動畫是否保持播放開始位置。
  • android:interpolator/setInterpolator(Interpolator)：指定動畫播放的速度曲線，不設定默認為勻速。
  • android:repeatCount/setRepeatCount(int)：動畫持續次數，如2，會播放三次。
  • android:repeatMode/setRepeatMode(int)：動畫播放模式。
  • android:startOffset/setStartOffset(long)：動畫延遲播放的時長，單位是毫秒。

　　Animation中內置的方法並不只有這些，還有一些其他的控制細節的方法，有需要可以查詢官方文檔，這里不再詳細講解。

 

　　上面提到，Android下對於補間動畫的支持，主要是使用Animation的幾個子類來實現，下面分別介紹Animation下的幾個子類：

  • AlphaAnimation：控制動畫透明度的變化。
  • RotateAnimation：控制動畫旋轉的變化。
  • ScaleAnimation：控制動畫成比例縮放的變化。
  • TranslateAnimation：控制動畫移動的變化。
  • AnimationSet：以上幾種變化的組合。

　　上面幾個Animation也包含了補間動畫的幾種變化，如果需要使用XML資源文件定義補間動畫，需要把XML資源文件定義在/res/anim/目錄下，在需要使用的地方通過AnimationUtils.loadAnimation(int)方法指定XML動畫ID來加載一段動畫。AnimationUtils是動畫工具類，其中實現了一些靜態的輔助動畫操作的方法。

　　例如：

1     /**
2      * 透明度變化
3      */
4     protected void toAlpha() {
5         Animation anim=AnimationUtils.loadAnimation(ToXMLActivity.this, R.anim.anim_alpha);
6         iv_anim.startAnimation(anim);
7     }

 

 

AlphaAnimation

　　AlphaAnimation，是Animation的子類，它用來控制透明度改變的動畫。創建該動畫的時候要指定動畫開始的透明度、結束時候的透明度和動畫的持續時間。其中透明度可以使用0~1之間的float類型的數字指定，0為透明，1為不透明。

　　AlphaAnimation有兩個構造函數，這里講一個最常用最直觀的，下面是它的完整簽名：

　　　　AlphaAniamtion(float fromAlpha,float toAlpha)

　　上面方法指定以兩個float類型的參數設定了動畫開始(fromAlpha)和結束(toAlpha)的透明度。

　　使用Java代碼定義AlphaAnimation動畫：

 1     /**
 2      * 透明度變化
 3      */
 4     protected void toAlpha() {
 5         // 動畫從透明變為不透明
 6         AlphaAnimation anim = new AlphaAnimation(1.0f, 0.5f);
 7         // 動畫單次播放時長為2秒
 8         anim.setDuration(2000);
 9         // 動畫播放次數
10         anim.setRepeatCount(2);
11         // 動畫播放模式為REVERSE
12         anim.setRepeatMode(Animation.REVERSE);
13         // 設定動畫播放結束后保持播放之后的效果
14         anim.setFillAfter(true);
15         // 開始播放，iv_anim是一個ImageView控件
16         iv_anim.startAnimation(anim);
17     }

　　同樣可以使用XML資源文件設定AlphaAnimation，它需要使用<alpha.../>標簽，為其添加各項屬性：

1 <?xml version="1.0" encoding="utf-8"?>
2 <alpha xmlns:android="http://schemas.android.com/apk/res/android"
3     android:duration="2000"
4     android:fillAfter="true"
5     android:fromAlpha="1.0"
6     android:repeatCount="2"
7     android:repeatMode="reverse"
8     android:toAlpha="0.5" >
9 </alpha>

　　在使用XML資源文件的時候，使用AnimationUtils.loadAnimation()方法加載它即可。

　　效果展示：

 

RotateAnimation

　　RotateAnimation，是Animation的子類，它用來控制動畫的旋轉，創建該動畫時只要指定動畫旋轉的"軸心坐標"、開始時的旋轉角度、結束時的旋轉角度，並指定動畫持續時間即可。

　　RotateAnimation有多個構造函數，這里講一個參數最多的，下面是它的完整簽名： 

　　　　RotateAnimation(float fromDegrees,float toDegrees,int pivotXType,float pivotXVlaue,int pivotYType,float pivotYValue)

　　RotateAnimation中，fromDegrees和toDegrees分別指定動畫開始和結束的旋轉角度，pivotXType和pivotYType指定旋轉中心的參照類型，它們以靜態常量的形式定義在Animation中，pivotXVlaue和pivotYValue指定旋轉中心的位置。

　　使用Java代碼定義RotateAnimation：

 1     /**
 2      * 旋轉變化
 3      */
 4     protected void toRotate() {
 5         // 依照圖片的中心，從0°旋轉到360°
 6         RotateAnimation anim = new RotateAnimation(0, 360,
 7                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
 8                 0.5f);
 9         anim.setDuration(2000);
10         anim.setRepeatCount(2);
11         anim.setRepeatMode(Animation.REVERSE);
12         iv_anim.startAnimation(anim);
13     }

　　同樣可以使用XML資源文件定義RotateAnimation，它需要使用<rotate.../>標簽，為其添加各項屬性：

1 <?xml version="1.0" encoding="utf-8"?>
2 <rotate xmlns:android="http://schemas.android.com/apk/res/android"
3     android:duration="2000"
4     android:fromDegrees="0"
5     android:pivotX="50%"
6     android:pivotY="50%"
7     android:repeatCount="2"
8     android:toDegrees="360" >
9 </rotate>

　　在使用XML資源文件的時候，使用AnimationUtils.loadAnimation()方法加載它即可。

　　效果展示：

 

 

ScaleAnimation

　　ScaleAnimation，是Animation的子類，它用來控制動畫的縮放。創建該動畫時要指定開始縮放的中心坐標、動畫開始時的縮放比、結束時的動畫縮放比，並指定動畫的持續時間即可。

　　ScaleAnimation有多個構造函數，這里講一個參數最多的，下面是它的完整簽名：

　　　　ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

　　上面ScaleAnimation構造函數中，fronX、 toX、fromY、toY，分別指定了縮放開始和結束的坐標，pivotXType和pivotYType設定了縮放的中心類型，pivotXValue和pivotYValue設定了縮放中心的坐標。

　　使用Java代碼定義ScaleAnimation：

 1     /**
 2      * 比例縮放變化
 3      */
 4     protected void toScale() {
 5         // 以圖片的中心位置，從原圖的20%開始放大到原圖的2倍
 6         ScaleAnimation anim = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f,
 7                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
 8                 0.5f);
 9         anim.setDuration(2000);
10         anim.setRepeatCount(2);
11         anim.setRepeatMode(Animation.REVERSE);
12         iv_anim.startAnimation(anim);
13     }

　　同樣可以使用XML資源文件定義ScaleAnimation，它需要使用<scale.../>標簽，為其添加各項屬性：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <scale xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:duration="2000"
 4     android:pivotX="50%"
 5     android:pivotY="50%"
 6     android:fromXScale="0.2"
 7     android:fromYScale="0.2"
 8     android:toXScale="2.0"
 9     android:toYScale="2.0" >
10 </scale>

　　在使用XML資源文件的時候，使用AnimationUtils.loadAnimation()方法加載它即可。

　　效果展示：

 

 

TranslateAnimation

　　TranslateAnimation，是Animation的子類，它用來控制動畫的移動。創建該動畫只要指定動畫開始時的位置、結束時的位置，並指定動畫持續的時間即可。

 　　TranslateAnimation有多個構造函數，這里講一個參數最多的，下面是它的完整簽名：

　　　　TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

　　上面TranslateAnimation構造函數中，它們指定了動畫開始的點類型以及點位置和動畫移動的X、Y點的類型以及值。

　　使用Java代碼定義TranslateAnimation：

 1     /**
 2      * 移動變化
 3      */
 4     protected void toTranslate() {
 5         // 從父窗口的（0.1,0.1）的位置移動父窗口X軸20%Y軸20%的距離
 6         TranslateAnimation anim = new TranslateAnimation(
 7                 Animation.RELATIVE_TO_PARENT, 0.1f,
 8                 Animation.RELATIVE_TO_PARENT, 0.2f,
 9                 Animation.RELATIVE_TO_PARENT, 0.1f,
10                 Animation.RELATIVE_TO_PARENT, 0.2f);
11         anim.setDuration(2000);
12         anim.setRepeatCount(2);
13         anim.setRepeatMode(Animation.REVERSE);
14         iv_anim.startAnimation(anim);
15     }

　　在使用XML資源文件的時候，使用AnimationUtils.loadAnimation()方法加載它即可。

　　同樣可以使用XML資源文件定義TranslateAnimation，它需要使用<translate.../>標簽，為其添加各項屬性：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <translate xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:fromXDelta="10%p" 
 4     android:toXDelta="20%p"
 5     android:fromYDelta="10%p"
 6     android:toYDelta="20%p"
 7     android:duration="2000"
 8     android:repeatCount="2" 
 9     android:repeatMode="reverse">
10 </translate>

　　在使用XML資源文件的時候，使用AnimationUtils.loadAnimation()方法加載它即可。

　　效果展示：

 

AnimationSet

　　AnimationSet，組合動畫，，是Animation的子類。有些場景需要完成透明度變化、旋轉、縮放、移動等多種變化，那么就可以使用AnimationSet來完成，它可以使用addAnimation(Animation)添加多個動畫進行組合播放。

　　AnimationSet有多個構造函數，這里講一個最常用的，下面是它的完整簽名：

　　　　AnimationSet(boolean shareInterpolator)

　　它只有一個boolean的參數，指定是否每個動畫分享自己的Interpolator，關於Interpolator的內容后面討論，如果為false，則每個AnimationSet中的每個動畫，使用自己的Interpolator。

　　使用Java代碼定義AnimationSet：

 1     /**
 2      * 組合動畫
 3      */
 4     protected void toSetAnim() {
 5         AnimationSet animSet = new AnimationSet(false);
 6         // 依照圖片的中心，從0°旋轉到360°
 7         RotateAnimation ra = new RotateAnimation(0, 360,
 8                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
 9                 0.5f);
10         ra.setDuration(2000);
11         ra.setRepeatCount(2);
12         ra.setRepeatMode(Animation.REVERSE);
13 
14         // 以圖片的中心位置，從原圖的20%開始放大到原圖的2倍
15         ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f,
16                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
17                 0.5f);
18         sa.setDuration(2000);
19         sa.setRepeatCount(2);
20         sa.setRepeatMode(Animation.REVERSE);
21 
22         // 動畫從透明變為不透明
23         AlphaAnimation aa = new AlphaAnimation(1.0f, 0.5f);
24         // 動畫單次播放時長為2秒
25         aa.setDuration(2000);
26         // 動畫播放次數
27         aa.setRepeatCount(2);
28         // 動畫播放模式為REVERSE
29         aa.setRepeatMode(Animation.REVERSE);
30         // 設定動畫播放結束后保持播放之后的效果
31         aa.setFillAfter(true);
32 
33         animSet.addAnimation(sa);
34         animSet.addAnimation(aa);
35         animSet.addAnimation(ra);
36 
37         iv_anim.startAnimation(animSet);
38     }

　　同樣可以使用XML資源文件定義AnimationSet，它需要使用<set.../>標簽，為其添加各項屬性：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android" >
 3 
 4     <rotate
 5         android:duration="2000"
 6         android:fromDegrees="0"
 7         android:pivotX="50%"
 8         android:pivotY="50%"
 9         android:repeatCount="2"
10         android:toDegrees="360" >
11     </rotate>
12 
13     <scale
14         android:duration="2000"
15         android:fromXScale="0.2"
16         android:fromYScale="0.2"
17         android:pivotX="50%"
18         android:pivotY="50%"
19         android:toXScale="2.0"
20         android:toYScale="2.0" >
21     </scale>
22 
23     <alpha
24         android:duration="2000"
25         android:fillAfter="true"
26         android:fromAlpha="1.0"
27         android:repeatCount="2"
28         android:repeatMode="reverse"
29         android:toAlpha="0.5" >
30     </alpha>
31 
32 </set>

　　在使用XML資源文件的時候，使用AnimationUtils.loadAnimation()方法加載它即可。

　　效果展示：

 

Animation變化坐標點的參照類型

　　上面看到，RotateAnimation、ScaleAnimation、TranslateAnimation都存在一對pivotXType，pivotYType參數，它們是用來指定點的參照類型，使用int類型以靜態常量的形式定義在Animation中，它有如下個值：

  • ABSOLUTE：以絕對坐標為參照。
  • RELATIVE_TO_PARENT：以父容器為參照。
  • RELATIVE_TO_SELF：以當前容器為參照。

　　細心的朋友有發現到，在使用XML定義動畫資源的時候，沒有關於pivotXType、pivotYType兩個屬性，其實它們結合到了設定點的坐標中中，以 pivotXValue、pivotYValue兩個屬性替代，其中如果需要設定為父容器為參照，需要在屬性值后面加"p"即可。

 

 Animation的Interpolator

　　補間動畫定義的是動畫開始、結束的關鍵幀，Android需要在開始幀、結束幀之間動態計算，插入大量幀，而Interpolator用於控制"插入幀"的行為。

　　Interpolator根據特定算法計算出整個動畫所需要動態插入幀的密度和位置，簡單來說，Interpolator負責控制動畫的變化速率，用來設定與基本動畫(Alpha、Scale、Rotate、Translate)的動畫播放速率。

　　Interpolator是一個接口，它定義了的所有Interpolator都需要實現方法:float getInterpolation(float)方法，如果需要自定義動畫的變化速率，只需要重寫這個接口即可，Android已經為開發人員提供了一些Interpolator的實現類，這里介紹幾個常用的：

  • LineraInterpolator：動畫以勻速的速度變化，默認值。
  • AccelerateInterpolator：在動畫開始的時候變化速度較慢，之后開始加速。
  • AccelerateDecelerateInterpolator：在動畫開始、結束的地方改變速度較慢，中間的時候加速。
  • CycleInterpolator：動畫循環播放特定的次數，變化速度按照正弦曲線變化。
  • DecelerateInterpolator：在動畫開始的地方速度較快，然后開始減速。

 

　　源碼下載

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Android動畫效果之Tween Animation（補間動畫） tween.js補間動畫庫 Android 補間動畫 tween.js緩動（補間動畫） android 補間動畫和Animation android 補間動畫的實現 Android學習—補間動畫（縮放動畫） Android動畫-幀動畫、補間動畫、屬性動畫 Android補間動畫(附帶Demo案例) Android之Fragment，幀動畫，補間動畫，屬性動畫
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM