1. 程式人生 > >【Android 動畫】動畫詳解之插值器(二)

【Android 動畫】動畫詳解之插值器(二)

大家好,在上一篇中,我們介紹了Android 的補間動畫,這一篇我們來說說動畫的另外一個公共屬性插值器Interpolator

在上一節中,實現的旋轉、位移動畫等動畫,我們會發現它一直是勻速的,但如果我們需要做一個加速的旋轉的動畫時,該如何做?

這就是Interpolator的由來,安卓系統已經為我們添加了9種插值器,讓我們一起來了解下

  • AccelerateDecelerateInterpolator 在動畫開始與結束比較慢,中間加速

  • AccelerateInterpolator 加速

  • AnticipateInterpolator 開始的時候向後然後向前甩

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

  • BounceInterpolator 動畫結束的時候彈起

  • CycleInterpolator 動畫迴圈播放特定的次數,速率改變沿著正弦曲線

  • DecelerateInterpolator 減速

  • LinearInterpolator 以常量速率改變

  • OvershootInterpolator  向前甩一定值後再回到原來位置

接著,我們實現一個旋轉動畫

        rotateAnimation = new RotateAnimation(0, 3600, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setDuration(5000);

設定插值器

        switch (view.getId()) {
            case R.id.btn_1:
//AccelerateDecelerateInterpolator 在動畫開始與結束比較慢,中間加速 rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator()); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_2: //AccelerateInterpolator 加速 rotateAnimation.setInterpolator(new AccelerateInterpolator()); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_3: //AnticipateInterpolator 開始的時候向後然後向前甩 rotateAnimation.setInterpolator(new AnticipateInterpolator()); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_4: //AnticipateOvershootInterpolator 開始的時候向後然後向前甩一定值後返回最後的值 rotateAnimation.setInterpolator(new AnticipateOvershootInterpolator()); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_5: //BounceInterpolator 動畫結束的時候彈起 rotateAnimation.setInterpolator(new BounceInterpolator()); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_6: //CycleInterpolator 動畫迴圈播放特定的次數,速率改變沿著正弦曲線 rotateAnimation.setInterpolator(new CycleInterpolator(0.5f)); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_7: //DecelerateInterpolator 減速 rotateAnimation.setInterpolator(new DecelerateInterpolator()); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_8: //LinearInterpolator 以常量速率改變 rotateAnimation.setInterpolator(new LinearInterpolator()); tvDemo.startAnimation(rotateAnimation); break; case R.id.btn_9: //OvershootInterpolator 向前甩一定值後再回到原來位置 rotateAnimation.setInterpolator(new OvershootInterpolator()); tvDemo.startAnimation(rotateAnimation); break; }

TIP: 由於動畫有點快,gif錄製的檔案比較大而且效果不好,所以這裡貼上apk,大家可以安裝之後自行檢視

image.png
image.png

最後獻上原始碼 github

參考資料:自定義控制元件三部曲之動畫篇

你的認可,是我堅持更新部落格的動力,如果覺得有用,就請點個贊,謝謝