glide:用animate()定制动画
来源:互联网 发布:ubuntu重启网卡 编辑:程序博客网 时间:2024/06/06 03:35
动画基础
图片之间的平滑切换是非常重要的。用户希望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:用animate()定制动画
- Glide入门教程——14.用animate()定制动画
- glide:用Modules定制Glide
- Glide 入门到精通之十三 ——用 animate() 自定义动画
- 动画Animate
- Glide入门教程——16.用Modules定制Glide
- Glide-通过Modules定制Glide
- jquery animate实现动画
- jquery自定义动画-animate()
- jQ animate队列动画
- jquery自定义动画animate()
- jquery自定义动画animate()
- jQuery 动画 - animate() 方法
- jQuery animate 动画效果
- animate.css 动画制作
- 【code】animate综合动画
- ng-animate动画实例
- jQuery动画之animate()
- DS.Lab筆記
- 几种 ETL 工具的比较(Kettle,Talend,Informatica 等)
- ETL利器Kettle实战应用解析系列二 【应用场景和实战DEMO下载】
- 求职谈薪水,破除锚定效应拿下高薪
- glide:自定义变换
- glide:用animate()定制动画
- 类与对象
- glide:整合网络协议栈
- glide:用Modules定制Glide
- 149. Max Points on a Line
- glide:Glide Module 案例: 接受自签名HTTPS证书
- glide:Glide Module案例: 自定义缓存
- glide:Glide Module 案例: 通过加载自定义大小图片优化
- 一些数论知识(不定期更新)