1. 程式人生 > >自定義控制元件三部曲之動畫篇(二)——Interpolator插值器

自定義控制元件三部曲之動畫篇(二)——Interpolator插值器

前言:雖然我不太能欣賞的了帕爾哈提的音樂,但我確實很欣賞他的人生態度,專心做自己,不想名利得失,有一天,你想要的東西都會來。其實我覺得,人生最可怕的就是停止不前,只要一直前行,總有一天會到達人生巔峰。

相關文章:

一、概述

Interpolator屬性是Animation類的一個XML屬性,所以alpha、scale、rotate、translate、set都會繼承得到這個屬性。Interpolator被譯為插值器,其實我不大能從字面上理解為什麼會這樣譯,其實他是一個指定動畫如何變化的東東,跟PS裡的動作有點類似:隨便拿來一張圖片,應用一個動作,圖片就會指定變化。

Interpolator的系統值有下面幾個:


意義如下:

  • AccelerateDecelerateInterpolator   在動畫開始與介紹的地方速率改變比較慢,在中間的時候加速
  • AccelerateInterpolator                     在動畫開始的地方速率改變比較慢,然後開始加速
  • AnticipateInterpolator                      開始的時候向後然後向前甩
  • AnticipateOvershootInterpolator     開始的時候向後然後向前甩一定值後返回最後的值
  • BounceInterpolator                          動畫結束的時候彈起
  • CycleInterpolator                             動畫迴圈播放特定的次數,速率改變沿著正弦曲線
  • DecelerateInterpolator                    在動畫開始的地方快然後慢
  • LinearInterpolator                            以常量速率改變
  • OvershootInterpolator                      向前甩一定值後再回到原來位置
下面看看各個標籤在應用上面的每個插值器後會運動軌跡會怎樣。

二、scale標籤

下面先看看Scale標籤應用插值器後,都會變成什麼樣。

先看下XML程式碼:(從控制元件中心點,從0放大到1.4倍,保持結束時的狀態)

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    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:duration="700" 
    android:fillAfter="true"
/>
下面一個個看看,每個xml值對應的scale動畫是怎樣的。


                   AccelerateInterpolator                                                 DecelerateInterpolator                    

在動畫開始的地方速率改變比較慢,然後開始加速                   在動畫開始的地方快然後慢

     

            AnticipateInterpolator                                            AnticipateOvershootInterpolator 

      開始的時候向後然後向前甩                                開始的時候向後然後向前甩一定值後返回最後的值

   

             BounceInterpolator                                                      CycleInterpolator       

            動畫結束的時候彈起                             動畫迴圈播放特定的次數,速率改變沿著正弦曲線

   

                        LinearInterpolator                                  OvershootInterpolator  

                      以常量速率改變                                向前甩一定值後再回到原來位置

   

三、rotate標籤

下面先看看rotate標籤應用插值器後,都會變成什麼樣。

先看下XML程式碼:(從控制元件中心點,從0放大到1.4倍,保持結束時的狀態)

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="700" 
    android:fillAfter="true"
/>
AccelerateDecelerateInterpolator   在動畫開始與介紹的地方速率改變比較慢,在中間的時候加速


                   AccelerateInterpolator                                                 DecelerateInterpolator                    

在動畫開始的地方速率改變比較慢,然後開始加速                   在動畫開始的地方快然後慢

      

            AnticipateInterpolator                                            AnticipateOvershootInterpolator 

      開始的時候向後然後向前甩                                開始的時候向後然後向前甩一定值後返回最後的值

   

             BounceInterpolator                                                      CycleInterpolator       

            動畫結束的時候彈起                             動畫迴圈播放特定的次數,速率改變沿著正弦曲線

   

                        LinearInterpolator                                  OvershootInterpolator  

                      以常量速率改變                                向前甩一定值後再回到原來位置

   

四、alpha標籤

下面先看看alpha標籤應用插值器後,都會變成什麼樣。

將透明度從0變成1.0,使用不同的插值器看看有什麼不同(因為只是透明度的變化,所以基本看不出來有什麼不同)
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="3000" 
    android:fillAfter="true"
/>
AccelerateDecelerateInterpolator   在動畫開始與介紹的地方速率改變比較慢,在中間的時候加速

                   AccelerateInterpolator                                                 DecelerateInterpolator                    

在動畫開始的地方速率改變比較慢,然後開始加速                   在動畫開始的地方快然後慢

   

            AnticipateInterpolator                                            AnticipateOvershootInterpolator 

      開始的時候向後然後向前甩                                開始的時候向後然後向前甩一定值後返回最後的值

   

             BounceInterpolator                                                      CycleInterpolator       

            動畫結束的時候彈起                             動畫迴圈播放特定的次數,速率改變沿著正弦曲線

   

                        LinearInterpolator                                   OvershootInterpolator  

                      以常量速率改變                                 向前甩一定值後再回到原來位置

   

五、translate標籤

下面先看看translate標籤應用插值器後,都會變成什麼樣。

把控制元件從(0,0)平移到(-200,-200)的位置,保持結束時狀態不變,使用不同插值器。
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXDelta="0"   
    android:toXDelta="-200"  
    android:fromYDelta="0"  
    android:toYDelta="-200"  
    android:duration="2000"  
    android:fillAfter="true"
/>

AccelerateDecelerateInterpolator   在動畫開始與介紹的地方速率改變比較慢,在中間的時候加速

                   AccelerateInterpolator                                                 DecelerateInterpolator                    

在動畫開始的地方速率改變比較慢,然後開始加速                   在動畫開始的地方快然後慢

   

            AnticipateInterpolator                                            AnticipateOvershootInterpolator 

      開始的時候向後然後向前甩                                開始的時候向後然後向前甩一定值後返回最後的值

   

             BounceInterpolator                                                      CycleInterpolator       

            動畫結束的時候彈起                             動畫迴圈播放特定的次數,速率改變沿著正弦曲線

   

                        LinearInterpolator                                  OvershootInterpolator  

                      以常量速率改變                                向前甩一定值後再回到原來位置

   


這篇文章到這就結束了,因為動畫比較多,可能看的會有點暈,下面我會給出上面效果所對應的原始碼,大家可以執行一下。

如果我的文章能幫到您,請加關注,謝謝。