Glide入门教程（12）用animate()定制动画

发表于 | 分类于 ， ， ， ， | 阅读次数
字数统计 | 阅读时长
学习在显示图片时的动画选项

动画基础

       图片之间的平滑切换是非常重要的。用户希望app里没有比较突兀的跳变。Glide的动画就是为了解决这个问题。Glide自带了一个标准的动画去减轻UI中的变化，就是之前的文章中用过的.crossFade()。

       但在这篇文章中，我们会学习另外一个不同于.crossFade()的方案。Glide提供了两个方案(忽略了第三个废弃的方案：animate(Animation animation))去设置动画。两个版本都用.animate()方法，但是需要传入不一样的参数。

       我们应当认识到动画只在当不能从缓存中提供时采用。如果图片在缓存内，它应该直接被加载，动画则是没有必要显示的。

资源动画

       回到代码，第一个方案是传递一个指向Android动画资源的id。Android系统提供一个从左边滑入的动画：android.R.anim.slide_in_left。这个代码就是一个XML描述的动画：

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <translate android:fromXDelta="-50%p" android:toXDelta="0"
            android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

       当然，你可以创建你自己的XML动画，例如一个小的缩放动画，让图片从小变大到全尺寸：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"  
     android:fillAfter="true">

    <scale
        android:duration="@android:integer/config_longAnimTime"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1"/>

</set>

       我们也可以将动画设置到Glide的构造器里：

1
2
3
4
5
Glide  
    .with( context )
    .load( eatFoodyImages[0] )
    .animate( android.R.anim.slide_in_left ) // or R.anim.zoom_in
    .into( imageView1 );

       当图片从网络准备好加载的时候，从左边滑入。

通过自定义类来实现

       当图片加载到常规的ImageView的时候很好实现。但如果目标是自定义的呢？另外一个方案将会非常有用，跟传递一个动画资源的引用不同，需要通过实现ViewPropertyAnimation.Animator接口的一个类。

       接口非常简单，只要实现无返回类型的animate(View view)方法，其中View对象就是整个target view。如果它是自定义view，你可以找到你的view的子元素，做必要的动画。

       先看个简单的例子。假设想要实现一个渐变的动画，你需要创建一个动画类：

1
2
3
4
5
6
7
8
9
10
11
12
13
ViewPropertyAnimation.Animator animationObject = new ViewPropertyAnimation.Animator() {  
    @Override
    public void animate(View view) {
        // if it's a custom view class, cast it here
        // then find subviews and do the animations
        // here, we just use the entire view for the fade animation
        view.setAlpha( 0f );

        ObjectAnimator fadeAnim = ObjectAnimator.ofFloat( view, "alpha", 0f, 1f );
        fadeAnim.setDuration( 2500 );
        fadeAnim.start();
    }
};

       下一步，你需要在Glide的请求里设置动画：

1
2
3
4
5
Glide  
    .with( context )
    .load( eatFoodyImages[1] )
    .animate( animationObject )
    .into( imageView2 );

       当然，在animate(View view)对象方法中，你可以做任何你要做的，用动画发挥你的创意。如果你正使用自定义view，你就可以转换view对象，然后调用自定义方法在你的自定义view上。

       经测试，使用ViewPropertyAnimation来实现自定义View的动画是有问题的，动画无法显示，图片直接加载出来。可以通过其它方法来实现，代码详见Github上的GlideTest

参考资料：
签到钱就到 Glide入门教程——14.用animate()定制动画

Fork me on GitHub