Pro Android学习笔记(一零七):2D动画(2):layout渐变动画

时间:2023-02-06 23:38:25

文章转载只能用于非商业性质,且不能带有虚拟货币、积分、注册等附加条件。转载须注明出处http://blog.csdn.net/flowingflying以及作者@恺风Wei

Layout动画可用于任何继承自ViewGroup的控件,例如ListView和GridView,通过不断改变view的属性,使每个item在屏幕的呈现具有指定的视觉效果,例如伸缩,旋转、移动和透明变化。我们先通过小例子学习如何实现基础的layout渐变,再学习不同的渐变动画模式。

小例子效果

小例子针对ListView,打开activity时,item以伸缩渐变来展现,如图所示:

Pro Android学习笔记(一零七):2D动画(2):layout渐变动画

步骤一:定义动画

在/res/anim/中通过XML对动画进行定义。本例子为/res/anim/scale.xml,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"> 表示渐变的速率方式,本例采用加速变化
    <scale  android:fromXScale="1"        从from到to表示开始和结束的值,定义放大值 
        android:toXScale="1"                      此两行表示X轴的变法从1到1,即不变化。
        android:fromYScale="0.1" 
        android:toYScale="1"                表示Y轴的变化从0.1逐渐增大至1,形成百叶窗效果
        android:duration="500"            渐变过程为500ms
        android:pivotX="50%"                   
        android:pivotY="50%"               支点为中心点
        android:startOffset="100"  />   从100ms开始进行动画处理
</set>

每个动画都可以指定渐变的时间duration和渐变的速率变化情况interpolator。在本例,我们也可以将android:interpolator设置为scale的属性。

layout的渐变动画有下面四种:1、伸缩动画(如小例子),基于x轴和y轴的伸缩,并可以指定支点;2、旋转动画:围绕支点旋转一定角度;3、移动动画:沿着X轴或Y轴移动;4、alpha动画:更改透明度。

这些变化的属性可以在android.view.animation包中相应的类,即ScaleAnimation、RotateAnimation、TranslateAnimation以及AlphaAnimation中查询相关的XML定义。这些基础动画都继承了Animation类,Animation类中带有duration、repeatCount,repeatMode、interpolator等XML参数。

步骤二:定义动画控制器

当我们定义了动画xml文件后,要将此动画关联到layout的viewGroup,还需要一个Controller对viewGroup中的各个view的变化进行说明,本例是从下而上的变化,而非各个view同步变化。同样地在android.view.animation包中定义了两个controller,分别是GridLayoutAnimationController和LayoutAnimationController。同样,相应的xml描述也放在/res/anim/目录下,本例子取名为list_layout_controler.xml:

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
        android:delay="30%"                           view的动画执行不同步,按顺序比上个view延迟duration的30%的时间
        android:animationOrder="reverse"    动画效果执行顺序是从反向(从下至上)
        android:animation="@anim/scale"    />

步骤三:将动画控制器关联ViewGroup

在这个简单的小例子中,实际上layout有两个View Group,分别是LinearLayout和ListView,要对ListView的每个view显示效果,动画需要关联至ListView中,相应的layout的xml内容如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView android:id="@+id/list_view_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent"  
       android:persistentDrawingCache="animation|scrolling"   推荐设置次值
        android:layoutAnimation="@anim/list_layout_controler"  />关联的layoutAmination控制器
</LinearLayout>

在ViewGroup中对android:persistentDrawing的解释如下,对于动画,建议设置该值。

Defines the persistence of the drawing cache. The drawing cache might be enabled by a ViewGroup for all its children in specific situations (for instance during a scrolling.) This property lets you persist the cache in memory after its initial usage. Persisting the cache consumes more memory but may prevent frequent garbage collection is the cache is created over and over again. By default the persistence is set to scrolling.

如果我们将动画加在另一个ViewGroup LinearLayout上,则对其所包含的view,即ListView产生动画效果,相关xml文件及动画内容如下:

Pro Android学习笔记(一零七):2D动画(2):layout渐变动画<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layoutAnimation="@anim/list_layout_controler"
    <ListView android:id="@+id/list_view_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

其他渐变动画

除了伸缩(scale)外,还有旋转(rotation)、移动(translate)和透明度(alpha)的渐变效果。下面是一个alpha的动画定义。实际上,如果我们只设置一种动画,可以不需要<set>,res/anim/alpha.xml内容如下:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="2000" />

在控制器list_layout_controler.xml中,将动画属性设置为android:animation="@anim/alpha。而在layout的xml中list_layout_controler已经关联到ListView中。这样我们就完成了一个透明渐变的效果。

如果我们设定的动画同时具有透明度变化和移动变化,top tag需要使用set,如下:

<?xml version="1.0" encoding="utf-8"?>
<set android:interpolator="@android:anim/accelerate_interpolator"
    xmlns:android="http://schemas.android.com/apk/res/android
">
    <translate android:fromYDelta="-100%" android:toYDelta="0" android:duration="2000"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="2000" />
</set>

下面是一个旋转的动画定义例子:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromDegrees="0.0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"  />

Interpolator

在动画的定义中有一个interpolate的属性,描述了变化是时间轴的关系,渐变过程可以是均匀的(线性的),也可以是非均匀的,例如变化的速率越来越快。

我们在sdk\platforms\android-19\data\res\anim中可能看到相关***_interpolateor.xml的定义。以accelerate_interpolator.xml为例,对应的相关的Java类为android.view.animation.AccelerateInterpolator,具体实现Interpolate接口。这些XML包括:accelerate_decelerate_interpolator.xml
accelerate_interpolator.xml
accelerate_interpolator.xml
anticipate_overshoot_interpolator.xml
bounce_interpolator.xml
cycle_interpolator.xml
decelerate_interpolator.xml
linear_interpolator.xml。

 

 小例子代码在:Pro Android学习:2D动画小例子

相关链接:我的Android开发相关文章