Glide入门教程——14.用animate()定制动画

2016-05-16 本文已影响3502人签到钱就到

Glide — 用animate()定制动画

原文：Custom Animations with animate()
作者：Norman Peitek
翻译：Dexter0218

上篇文章，我们介绍了如何在显示图片之前变换图片。这篇文章继续学习在显示图片时的动画选项。

Glide 系列概览

动画基础

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

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

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

* =我们忽略了第三个，废弃的方案：animate(Animation animation)。

资源动画

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

<?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动画，例如，一个小的缩放动画，让图片从小变大到全尺寸：

<?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的构造器里：

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的子元素，做必要的动画。

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

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的请求里设置动画：

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

当然，在你的animate(View view)对象方法中，你可以做任何你要做的。用动画发挥你的创意。

如果你正使用自定义view，你就可以转换view对象，然后调用自定义方法在你的自定义view上。

总结

在这篇文章中，你已经学会了如何创建并应用标准、自定义动画到你的Glide请求中。这是我们常用的非常有用的技能之一。我们建议你花点时间测试一下我们的代码，实现你自己的想法。在下面的评论里让我们知道你的进展！

后面，我们将开始解决我们最后一个大的Glide话题：定制Glide！下篇文章将具体介绍如何整合各种网络协议栈到Glide中。