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);
    }
复制代码