Glide 知識梳理(4) 自定義animate

澤毛發表於2017-12-21
IDE

一、概述

在之前基礎用法的文章中，我們介紹了使用crossFade來進行placeHolder和要載入的圖片之間漸進漸出的動畫，今天，我們來介紹一個更加高階的用法 - animate()。

animate有以下兩個過載方法，我們可以給它指定一個R.anim下的動畫資原始檔，或者傳入一個實現了ViewPropertyAnimation.Animator介面的例項，來自定義自己的動畫。

  • public DrawableRequestBuilder<ModelType> animate(int animationId)
  • public DrawableRequestBuilder<ModelType> animate(ViewPropertyAnimation.Animator animator)

二、示例

2.1 在xml中定義動畫

在xml中使用自定的動畫很簡單， 首先，我們在R.anim資料夾下定義一個動畫資原始檔，R.anim.glide_animate

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1.0" />
    <scale
        android:fromXScale="0.5"
        android:toXScale="1.0"
        android:fromYScale="0.5"
        android:toYScale="1.0"
        android:pivotY="50%"
        android:pivotX="50%"/>
</set>
複製程式碼

然後，我們呼叫animate把這個資原始檔的id傳進去，這樣，當圖片載入完成之後，就會以一個慢慢放大且漸顯的方式出現了。

    public void loadAnimate(View view) {
        Glide.with(this)
                .load("http://i.imgur.com/DvpvklR.png")
                .diskCacheStrategy(DiskCacheStrategy.NONE)
                .animate(R.anim.glide_animate)
                .into(mImageView);
    }
複製程式碼

2.2 通過ViewPropertyAnimation.Animator定義動畫

當我們的容器是一個ImageView時，用上面的方式是最方便的。然後回想一下，之前我們介紹過的自定義Target文章中，我們談到了ViewTarget，也就是我們定義了一個自定義的View，那麼這時候如果我們希望這個自定義View中的各個元件可以用不同的動畫方式展現出來，那麼上面這種用xml定義動畫執行過程就不適用了，下面我們展示一下繼承於ViewPropertyAnimation.Animator來進行動畫。

    private class MyAnimator implements ViewPropertyAnimation.Animator {

        @Override
        public void animate(View view) {
            final View finalView = view;
            ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue();
                    finalView.setScaleX((float) (0.5 + 0.5 * value));
                    finalView.setScaleY((float) (0.5 + 0.5 * value));
                    finalView.setAlpha(value);
                }
            });
            valueAnimator.start();
        }
    }
複製程式碼

然後，我們例項化一個MyAnimator，通過animate()傳入：

    public void loadAnimator(View view) {
        MyAnimator myAnimator = new MyAnimator();
        Glide.with(this)
                .load("http://i.imgur.com/DvpvklR.png")
                .diskCacheStrategy(DiskCacheStrategy.NONE)
                .animate(myAnimator)
                .into(mImageView);
    }
複製程式碼

相關文章