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

1、概述

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

animate有如下兩個重載方法，咱們能夠給它指定一個R.anim下的動畫資源文件，或者傳入一個實現了ViewPropertyAnimation.Animator接口的實例，來自定義本身的動畫。

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

2、示例

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);
    }
複製代碼