天天看點

在Android動畫基礎上實作自定義的動畫效果

Android提供的平移動畫有隻有加速、減速等,如果我們需要其他的自定義動畫效果,應該如何實作呢?這裡作者就用自定義的算法來實作一個平移動畫效果。

一、使用Android的Interpolator實作動畫效果

       位移動畫有多種時間插值算法,比如我們常用的有AccelerateDecelerateInterpolator、AccelerateInterpolator、DecelerateInterpolator等,這些插值算法是為了給平移動畫添加各種效果,加速減速、加速、減速等,這裡舉個例子。

AccelerateDecelerateInterpolatorinterpolator = new AccelerateDecelerateInterpolator();
        TranslateAnimation translateAnim2 = new TranslateAnimation(0,-300,0,-500);
            translateAnim2.setDuration(600);
            translateAnim2.setInterpolator(interpolator);
            translateAnim2.setFillAfter(true);
            mImageView.startAnimation(translateAnim2);
           

于是,一個ImageView的加速減速效果的平移動畫就成形了。

二、對Android動畫算法的分析

   這裡是讓ImageView進行平移動畫,同時,平移的效果是先加速,再減速。

   那麼,插值是如何讓平移動畫先加速再減速的呢?

   我們先來看一下DecelerateInterpolator的算法吧。

   interpolatedTime  = (1.0f - (1.0f - input) * (1.0f - input))

     input可以了解為用時的百分比,interpolatedTime  可以了解為移動距離的百分比(取值範圍0%——100%)。

    這是一個input自變量範圍在[0,1],于是interpolatedTime 值的範圍也在[0,1]的連續函數,我自己了解這裡自變量就是總時間的比例(取值

為%0,100%),函數值就是運動距離的比例(取值為%0,100%)。其函數圖:

     例如:

     現在插值input為 0.2(即用了總時間的20%),我用公式計算得到一個值interpolatedTime 為0.3,也就是運動了整個距離的30%,那麼該View的x坐标值運動計算公式:

             mFromXDelta + ((mToXDelta - mFromXDelta) * interpolatedTime)

     其中,mFromXDelta 為運動起始x坐标,mToXDelta為運動終點x坐标,那這樣的話,就運動了總長度的0.3,一直到interpolatedTime 的值為1,整個動畫就結束了。

在Android動畫基礎上實作自定義的動畫效果

    那麼,函數的斜率其實就是速度,如圖,DecelerateInterpolator函數的斜率是不斷減小的,于是産生了減速的效果。

    好了,現在我們就可以着手寫一個自己想要的動畫效果算法了,隻需用滿足以下條件即可:

   1.函數是連續的,如果不連續,動畫效果将不會連續

    2.自變量範圍[0,1],自變量的值是系統生成的

    3.函數值域為[0,1]

三、自己實作Android動畫算法

    于是,我自己寫了一個彈性的加速減速效果(android自己提供的加速減速效果不夠猛烈啊),代碼如下:

if (t < 0.4) {
    return (float)(t*t);
    }else if (t >= 0.4 &&t <= 0.6) {
    return (float)(3.4*t - 1.2);
    }else 
    return (float)(1.0f - (1.0f - t) * (1.0f - t));
           

    函數圖象如下:

在Android動畫基礎上實作自定義的動畫效果

    用這個算法,加速減速效果就非常明顯啦!接下來,自己去建立一個類似DecelerateInterpolator的類,将這個算法寫入getInterpolation()方法就可以直接使用了。

    同時,我想,旋轉等效果的動畫算法原理也應該是一樣的,是以,咱們可以自己去實作很多效果的動畫!