Android Animation实战之一个APP的ListView的动画效果

5
回复
727
查看
[复制链接]

579

主题

1328

帖子

3257

安币

手工艺人

发表于 2018-1-31 17:19:21 | 显示全部楼层 |阅读模式

            

        熟悉了基础动画的实现后,便可以试着去实现常见app中出现过的那些精美的动画。今天我主要给大家引入一个app的listview的动画效果: 当展示listview时,listview的每一个列表项都按照规定的动画显示出来。
说起来比较抽象,先给大家看一个动画效果,这是app窝牛装修的listview显示动画:

        

2016111170514870.jpg

        有木有觉得很酷炫?有木有啊!?

        一、layout animation
所谓的布局动画,其实就是为viewgroup添加显示动画效果,主要用过layoutanimationcontroller来控制实现。layoutanimationcontroller用于为一个layout里面的控件,或者是一个viewgroup里面的控件设置动画效果,可以在xml文件中设置,亦可以在java代码中设置。

        1.1 在xml文件中设置布局动画

         首先,我们在res/anim文件夹下建立一个list_anim_layout.xml文件,该文件就是布局动画控制器。

[Java] 查看源文件 复制代码
<layoutanimation xmlns:android="http://schemas.android.com/apk/res/android" 
  android:delay="30%" 
  android:animationorder="random" 
  android:animation="@anim/slide_right" /> 

        android:delay 子类动画时间间隔 (延迟) 70% 也可以是一个浮点数 如“1.2”等。
android:animationorder="random" 子类的显示方式 random表示随机。
android:animationorder 的取值有



  

    1. normal 0 默认
  


  

    2. reverse 1 倒序
  


  

    3. random 2 随机

        android:animation="@anim/slide_right" 表示列表项显示时的具体动画是什么!
下面,我们定义每一个列表项显示时的动画效果吧,及slide_right.xml:

[Java] 查看源文件 复制代码
<

        显示的效果为listview第一次出现的时候为 item随机出现 每个item都是从右边的区域向左滑动到显示的地方。
接下来,你只需要把这个布局动画,指定到viewgroup上就好了:

[Java] 查看源文件 复制代码
<listview 
    android:id="@+id/listview" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layoutanimation="@anim/list_anim_layout" 
    > 
</listview> 

        就这么简单就完成了,快来看下效果吧:

        

2016111170625061.jpg

        1.2 在java代码中实现布局动画
在java代码中实现布局动画并无难度,只要熟悉几个api的使用即可。 关于动画的定义和上文一致,只是,你不需要再在把控制动画应用到listview中了,即android:layoutanimation="@anim/list_anim_layout"这行代码可以删除。
接下来,需要在java代码中进行配置:

[Java] 查看源文件 复制代码
private void startlayoutanim() { 
  //通过加载xml动画设置文件来创建一个animation对象; 
  animation animation = animationutils.loadanimation(this, r.anim.slide_right); 
  //得到一个layoutanimationcontroller对象; 
  layoutanimationcontroller lac = new layoutanimationcontroller(animation); 
  //设置控件显示的顺序; 
  lac.setorder(layoutanimationcontroller.order_reverse); 
  //设置控件显示间隔时间; 
  lac.setdelay(1); 
  //为listview设置layoutanimationcontroller属性; 
  listview.setlayoutanimation(lac); 
} 

         观察下,效果和之前使用xml文件肯定是一致的了。

         介绍到这里,可能有人会有疑问了,博文一开始介绍的“窝牛装修”的那种效果,是每一个列表项显示的时候才会显示动画。我们这个确实所有的列表项的动画一起都显示了,只是显示顺序不同而已。 通过我们这种方法,怎么可能会达到那种效果呢?
确实,通过布局动画,没办法控制每一个item在加载时才显示动画。那该如何是好呢?
兄弟们,换个思路吧,如果布局动画完成不了,何必不直接用简单的补间动画,再结合每个列表项的显示控制,来实现窝牛装修列表显示的效果呢?
那有人会问了,怎么知道每一个列表项何时才加载么?
你难道忘了baseadapter的getview()方法了么?
没错,每当一个列表项显示时,都会主动调用baseadaper的getview()方法。

        二、仿窝牛装修list列表的动画效果
首先,我们定义一个动画资源,该动画即是列表项显示时的动画:woniu_list_item.xml

[Java] 查看源文件 复制代码
<

         该平移动画表示,从下往上,垂直平移100px,时间为500毫秒。
接下来,我们需要在baseadapter的getview()方法里,去使用该动画:

[Java] 查看源文件 复制代码
import android.content.context; 
import android.view.layoutinflater; 
import android.view.view; 
import android.view.viewgroup; 
import android.view.animation.animation; 
import android.view.animation.animationutils; 
import android.widget.baseadapter; 
import android.widget.imageview; 
import android.widget.textview; 
 
 
import java.util.list; 
 
public class woniulistadapter extends baseadapter { 
 
  private context mcontext; 
 
  private layoutinflater minflater; 
 
  private list<woniusimple> mdatas; 
 
  private animation animation; 
 
  public woniulistadapter(context context, list<woniusimple> datas) { 
    mcontext = context; 
    minflater = layoutinflater.from(mcontext); 
    mdatas = datas; 
 
    animation = animationutils.loadanimation(mcontext, r.anim.woniu_list_item); 
  } 
 
  @override 
  public int getcount() { 
    return (mdatas != null 

         我们来简要分析应用动画的地方: 1、我们adapter的构造方法里加载了之前定义的动画,活的animation对象。 2、 我们在getview方法里,为convertview设置并启动animation,即convertview.startanimation(animation)。
够简单吧,只是这么两行代码,就可以实现在加载每一个view item时启动动画效果。
可是,我们发现,这并不是非常完美的实现,为啥这么说呢?
因为你此刻往上滑动列表,会发现,已经加载过的item的动画还会再次启动执行一次。这个体验太糟糕了。为啥会出现这种情况啊?
因为getview方法的调用时机会对动画产生影响。adapter中的getview方法,会在每一个item处于可见状态时调用,所以无论你上滑还是下滑,都会重复调用getview方法(这也是listview为啥在使用时要进行优化的地方)。
所以,为了解决刚刚发生的问题,我们可以设置标识,进行判断,已经加载过的view的动画不再进行启动加载。
完整的代码如下:

[Java] 查看源文件 复制代码
package com.lnyp.layoutanimation; 
 
import android.content.context; 
import android.view.layoutinflater; 
import android.view.view; 
import android.view.viewgroup; 
import android.view.animation.animation; 
import android.view.animation.animationutils; 
import android.widget.baseadapter; 
import android.widget.imageview; 
import android.widget.textview; 
 
 
import java.util.hashmap; 
import java.util.list; 
import java.util.map; 
 
public class woniulistadapter extends baseadapter { 
 
  private context mcontext; 
 
  private layoutinflater minflater; 
 
  private list<woniusimple> mdatas; 
 
  private animation animation; 
 
  private map<integer, boolean> isfrist; 
 
  public woniulistadapter(context context, list<woniusimple> datas) { 
    mcontext = context; 
    minflater = layoutinflater.from(mcontext); 
    mdatas = datas; 
 
    animation = animationutils.loadanimation(mcontext, r.anim.woniu_list_item); 
    isfrist = new hashmap<integer, boolean>(); 
  } 
 
  @override 
  public int getcount() { 
    return (mdatas != null 

         看到了么,加了一个isfirst进行判断,这样,就可以有效控制动画的显示了。效果如下:

        

2016111170805841.jpg

         本文我主要介绍了两个部分,一个是layout animation布局动画,使用布局动画可以控制view groups中的每一个数据的显示动画; 还一个就是实战,仿“窝牛装修”listview滑动时每一个item滑动进入可见状态的动画效果。通过这两个动画示例,我相信可以帮助大家更好的处理动画,克服“动画恐惧症”。



        

14

主题

1万

帖子

3891

安币

码皇(巴士元老)

Rank: 8Rank: 8

发表于 2018-2-1 09:43:33 | 显示全部楼层
帮帮顶顶!!

2

主题

9494

帖子

2469

安币

Android大神

Rank: 6Rank: 6

发表于 2018-2-1 22:25:33 | 显示全部楼层
不错不错,楼主辛苦了。。。

0

主题

9522

帖子

1140

安币

Android大神

Rank: 6Rank: 6

发表于 2018-2-2 13:50:26 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:lol

0

主题

9315

帖子

2894

安币

Android大神

Rank: 6Rank: 6

发表于 2018-2-3 10:53:14 | 显示全部楼层
不错不错,楼主辛苦了。。。

2

主题

9693

帖子

2085

安币

Android大神

Rank: 6Rank: 6

QQ达人

发表于 2018-2-4 06:32:57 | 显示全部楼层
感谢分享,楼主V5~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )