Android基礎動畫之Tween Animation和Frame Animation

_小馬快跑_發表於2017-12-15
Android動畫

官網介紹： https://developer.android.com/guide/topics/resources/animation-resource.html Android動畫可分為兩大類：

  1. API在11之前主要是：Tween Animation（補間動畫）和Frame Animation（幀動畫）
  2. API在11之後又新增了屬性動畫，在11之前的低版本是不能使用屬性動畫的，不過可以通過Jake大神的相容庫來使用它 （https://github.com/JakeWharton/NineOldAndroids ）。 這篇文章主要介紹補間動畫和幀動畫！ ###補間動畫（Tween Animation）：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@[package:]anim/*interpolator_resource*" 
     android:shareInterpolator=["true" | "false"] >    
<alpha
      android:fromAlpha="float"       
      android:toAlpha="float" />    
<scale  
      android:fromXScale="float"        
      android:toXScale="float"        
      android:fromYScale="float"        
      android:toYScale="float"        
      android:pivotX="float"        
      android:pivotY="float" />    
<translate 
      android:fromXDelta="float"        
      android:toXDelta="float"        
      android:fromYDelta="float"        
      android:toYDelta="float" />    
<rotate      
      android:fromDegrees="float"       
      android:toDegrees="float"        
      android:pivotX="float"        
      android:pivotY="float" />    
<set 
 ...    
</set>
</set>
複製程式碼

這個XML檔案只能有一個根元素，, , , 中的一個，或者是作為根元素並可以包含上述四種動畫元素，中還可以繼續巢狀。 ###元素： ###1. 包含其他動畫元素（, , , ），也可以再巢狀元素 屬性： #####android:interpolator    Interpolator 被用來修飾動畫效果，定義動畫的變化率，可以使存在的動畫效果accelerated(加速)，decelerated(減速),repeated(重複),bounced(彈跳)等。 1.AccelerateDecelerateInterpolator 在動畫開始與結束的地方速率改變比較慢，在中間的時候加速 2.AccelerateInterpolator 在動畫開始的地方速率改變比較慢，然後開始加速 3.AnticipateInterpolator 開始的時候向後然後向前甩 4.AnticipateOvershootInterpolator 開始的時候向後然後向前甩一定值後返回最後的值 5.BounceInterpolator 動畫結束的時候彈起 6.CycleInterpolator 動畫迴圈播放特定的次數，速率改變沿著正弦曲線 7.DecelerateInterpolator 在動畫開始的地方快然後慢 8.LinearInterpolator 以常量速率改變 9.OvershootInterpolator 向前甩一定值後再回到原來位置 更多介紹：https://my.oschina.net/banxi/blog/135633 #####android:shareInterpolator 如果設定android:shareInterpolator="true"則表示所有的子元素共用一個Interpolator ###2. 淡入淡出動畫效果 #####android:fromAlpha 起始透明度(0.0~1.0),0.0表示完全透明，1.0表示不透明 #####android:toAlpha 結束透明度(0.0~1.0),0.0表示完全透明，1.0表示不透明 ###3. 縮放動畫 #####android:fromXScale 起始x軸座標，1.0表示沒有變化 #####android:toXScale 終止x軸座標，1.0表示沒有變化 #####android:fromYScale 起始y軸座標，1.0表示沒有變化 #####android:toYScale 終止y軸座標，1.0表示沒有變化 #####android:pivotX pivotX表示縮放的中軸點X座標，距離自身左邊緣的位置 android:pivotX="50"這種方法使用絕對位置定位，相當於程式碼中的 Animation.ABSOLUTE android:pivotX="50%"這種方法相對於控制元件本身定位，相當於程式碼中的 Animation.RELATIVE_TO_SELF android:pivotX="50%p" 這種方法相對於控制元件 的父控制元件定位，相當於程式碼中上 Animation.RELATIVE_TO_PARENT pivotX表示相對於物件的X座標的位置，從0%-100%中取值，50%為圖片的X方向座標上的中點位置 #####android:pivotY 同理，pivotY表示縮放的中軸點Y座標，距離自身上邊緣的位置 ###3. 移動動畫，支援下面的三種格式： -100%~100%：表示相對於自身的百分比 -100%p~100%p：表示相對於父控制元件的百分比 -100~100：表示移動的絕對值 #####android:fromXDelta 起始X軸座標 #####android:toXDelta 終止的X軸座標 #####android:fromYDelta 起始Y軸座標 #####android:toYDelta 終止Y軸座標 ###4. 旋轉動畫 #####android:fromDegrees 起始位置的角度 #####android:toDegrees 結束位置的角度 #####android:pivotX 旋轉中心的X軸座標：  1)當值為"50"，表示使用絕對位置定位   2)當值為"50%"，表示使用相對於控制元件本身定位   3)當值為"50%p"，表示使用相對於控制元件的父控制元件定位 #####android:pivotY 旋轉中心的Y軸座標

###EXAMPLE: XML檔案儲存路徑：

<set xmlns:android="http://schemas.android.com/apk/res/android"   
     android:shareInterpolator="false">    
    <scale 
     android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
     android:fromXScale="1.0"        
     android:toXScale="1.4"        
     android:fromYScale="1.0"        
     android:toYScale="0.6"        
     android:pivotX="50%"        
     android:pivotY="50%"        
     android:fillAfter="false"        
     android:duration="700" />    
     <set        
        android:interpolator="@android:anim/accelerate_interpolator"  
        <-- android:startOffset表示延遲執行-->
        android:startOffset="700">        
        <scale            
        android:fromXScale="1.4"            
        android:toXScale="0.0"            
        android:fromYScale="0.6"            
        android:toYScale="0.0"            
        android:pivotX="50%"            
        android:pivotY="50%"            
        android:duration="400" />        
        <rotate            
        android:fromDegrees="0"            
        android:toDegrees="-45"            
        android:toYScale="0.0"            
        android:pivotX="50%"            
        android:pivotY="50%"            
        android:duration="400" />    
     </set>
</set>
複製程式碼

**android:startOffset="700"**表示延遲700ms執行動畫

動畫作用在ImageView上：

ImageView image = (ImageView) findViewById(R.id.image);
Animation hyperspaceJump = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
image.startAnimation(hyperspaceJump);
複製程式碼

###幀動畫（Frame animation） 幀動畫是在XML中定義的順序顯示一系列圖片的動畫（像放電影一樣） 檔案地址： res/drawable/filename.xml 檔名將被用來作為 resource ID.

<?xml version="1.0" encoding="utf-8"?>
<animation-list
   xmlns:android="http://schemas.android.com/apk/res/android" 
   android:oneshot=["true" | "false"] >    
<item
   android:drawable="@[package:]drawable/drawable_resource_name"   
   android:duration="*integer*" />
</animation-list>
複製程式碼

###元素 ##### 必須是根元素，其內部包含若干個元素 ######android:oneshot： "true" 表示動畫只會被執行一次 "false" 表示動畫只會被迴圈執行 ##### 單幀動畫，必須是 的子元素 ######android:drawable: 圖片資源，用於繪製一幀動畫 ######android:duration: 幀動畫的持續時間，以毫秒為單位 ###例子 檔案儲存在：res/anim/rocket.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">    
    <item 
    android:drawable="@drawable/rocket_thrust1" 
    android:duration="200" />
    <item 
    android:drawable="@drawable/rocket_thrust2"
    android:duration="200" />    
    <item 
    android:drawable="@drawable/rocket_thrust3" 
    android:duration="200" />
</animation-list>
複製程式碼

應用程式將設定這個動畫作為View的背景，然後播放此動畫。

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketAnimation.start();
複製程式碼

相關文章