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

Glide — 用animate()定制动画

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

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

文／签到钱就到（简书作者）
原文链接：http://www.jianshu.com/p/c965cc287382

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

动画基础

图片之间的平滑切换是非常重要的。用户希望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中。

文／签到钱就到（简书作者）
原文链接：http://www.jianshu.com/p/c965cc287382
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。