glide:用animate()定制动画

动画基础

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值