Material Design动画（三）

本文将介绍3个关于Material Design动画中触摸反馈特效的demo。

demo1：用ripple标签实现点击屏幕后的涟漪波纹反馈特效

效果展示

当点击屏幕时，屏幕上将出现以手指为圆心、向外扩散的圆形涟漪波纹效果，如下所示：

实现过程

上述特效是Material Design特有的效果，故需要使用Android5.0自带的主题，若不考虑兼容性，可以在AndroidManifest中声明的主题继承于如下父类主题：

parent="android:Theme.Material.Light"

考虑到Android碎片化问题，更多时候，还是应使用兼容主题作为父类主题：

parent="android:theme.AppCompat.Light"

下面是界面的布局，就是两个简单的TextView，涟漪波纹效果就在这两个TextView上产生。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<TextView

android:id="@+id/image"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="@drawable/myripple"
android:clickable="true"
android:gravity="center"
android:text="Clickable" />

<TextView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_below="@id/image"
android:layout_marginTop="20dp"
android:background="@drawable/myripple2"
android:clickable="true"
android:gravity="center"
android:text="Clickable" />

</RelativeLayout>

代码的关键就是属性

android:background

，Android5.0为开发者提供了一个标签ripple，只需在drawable文件夹下创建一个以ripple为根标签的XML文件，就能产生波纹涟漪效果：

ripple.xml文件

<ripple

xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ff0099ff">

</ripple>

ripple2.xml文件

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#349856">
<item android:drawable="@android:color/holo_red_light"></item>

</ripple>

ripple标签中的

android:color

属性是必须要指定的，该属性用于指定元素被点击时的颜色；若还需指定未点击时的元素颜色，需要加入子标签item，并通过

android:drawable

属性指定未点击元素时的颜色，此时，波纹只能在控件所在区域扩散（如点击第二个TextView时所示），而若需要在点击元素时，波纹能扩散至元素范围之外（如点击第一个TextView时所示），只需要把子标签item去掉就可以了，此时的元素背景色将是缺省色。

demo2：点击元素产生元素被手指吸附的效果

效果展示

当点击某个元素时，元素在Z轴上增加了一定的高度（通过增加阴影表现），仿佛是元素被按下的手指吸附一样，效果如下：



未点击时无吸附效果



点击时有吸附效果

实现过程

布局如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EAEAEA">

<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:colorPrimary"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:orientation="vertical">

<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="45dp"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:clickable="true"
android:elevation="2dp"
android:stateListAnimator="@drawable/translation_selector"
card_view:cardCornerRadius="4dp" />

<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="45dp"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:clickable="true"
android:elevation="2dp"
android:stateListAnimator="@drawable/translation_selector"
card_view:cardCornerRadius="4dp" />

<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="45dp"
android:layout_gravity="center"
android:layout_marginBottom="@dimen/activity_vertical_margin"
android:layout_marginTop="16dp"
android:clickable="true"
android:elevation="2dp"
android:stateListAnimator="@drawable/translation_selector"
card_view:cardCornerRadius="4dp" />

</LinearLayout>
</FrameLayout>

首先定义了1个ToolBar和3个CardView，这两个控件都在android.support.v7.widget包中，故声明控件时需要指定全限定类名；重点是属性

android:stateListAnimator

，该属性可为元素设置“基于状态的动画（stated-based animator）”，通过在drawable文件夹中定制以selector为根标签的XML文件，可实现吸附效果。

在drawable中自定义基于状态的动画：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="10dp" android:valueType="floatType" />
</set>
</item>
<item android:state_pressed="false">
<set>
<objectAnimator android:duration="100" android:propertyName="translationZ" android:valueTo="2dp" android:valueType="floatType" />
</set>
</item>
</selector>

Android5.0为selector增加了动画效果，上述代码分别指定了当元素处于点击状态和非点击状态时的属性，可以看出，是通过属性动画实现的，关键就在于属性

android:valueTo

，该属性指定元素在Z轴上的高度。

demo3：综合

本demo将综合上面两个demo的部分知识点，实现当元素处于点击状态时，该元素发生躲闪的小游戏。

实现效果

初始样式



点击第一行第二列的元素时，元素上移。



点击第二行第二列的元素时，元素消失。



点击第三行第一列的元素时，元素向左下角移动。

实现过程

定义一个元素的统一样式，方便代码复用。

<style name="touchboard">
<item name="android:layout_margin">10dp</item>
<item name="android:layout_gravity">center</item>
<item name="android:layout_width">80dp</item>
<item name="android:layout_height">80dp</item>
<item name="android:elevation">2dp</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center</item>
<item name="android:background">#ffffff</item>
</style>

接着定义布局文件，代码的关键仍然是属性

android:stateListAnimator

，通过该属性可以定制基于状态的动画。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<TextView
android:id="@+id/center"
style="@style/touchboard"
android:layout_centerInParent="true"
android:stateListAnimator="@drawable/tocenter" />

<TextView
android:id="@+id/up"
style="@style/touchboard"
android:layout_above="@id/center"
android:layout_centerHorizontal="true"
android:stateListAnimator="@drawable/toup" />

<TextView
android:id="@+id/down"
style="@style/touchboard"
android:layout_below="@id/center"
android:layout_centerHorizontal="true"
android:stateListAnimator="@drawable/todown"

/>

<TextView
android:id="@+id/left"
style="@style/touchboard"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/center"
android:stateListAnimator="@drawable/toleft" />

<TextView
android:id="@+id/right"
style="@style/touchboard"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/center"
android:stateListAnimator="@drawable/toright" />

<TextView
android:id="@+id/rightup"
style="@style/touchboard"
android:layout_above="@id/center"
android:layout_toRightOf="@id/center"
android:stateListAnimator="@drawable/toupright" />

<TextView
android:id="@+id/leftup"
style="@style/touchboard"
android:layout_above="@id/center"
android:layout_toLeftOf="@id/center"
android:stateListAnimator="@drawable/toupleft" />

<TextView
android:id="@+id/rightdown"
style="@style/touchboard"
android:layout_below="@id/center"
android:layout_toRightOf="@id/center"
android:stateListAnimator="@drawable/torightdown" />

<TextView
android:id="@+id/leftdown"
style="@style/touchboard"
android:layout_below="@id/center"
android:layout_toLeftOf="@id/center"
android:background="#ffffffff"
android:stateListAnimator="@drawable/todownleft" />

</RelativeLayout>

在drawable文件夹中用selector标签给元素定制基于状态的动画：

给第一行第一列元素指定动画：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationY"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="-80dp"
android:valueType="floatType"/>
<objectAnimator android:propertyName="translationX"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="-80dp"
android:valueType="floatType"/>
</set>
</item>
<item
android:state_pressed="false"
>
<set>
<objectAnimator android:propertyName="translationY"
android:duration="100"
android:valueTo="0dp"
android:valueType="floatType"/>
<objectAnimator android:propertyName="translationX"
android:duration="100"
android:valueTo="0dp"
android:valueType="floatType"/>
</set>
</item>
</selector>

给第一行第二列元素指定动画：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationY"
android:duration="@android:integer/config_shortAnimTime"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:valueTo="-80dp"
android:valueType="floatType"/>

</set>
</item>
<item
android:state_pressed="false"
>
<set>
<objectAnimator android:propertyName="translationY"
android:duration="100"
android:valueTo="0dp"
android:valueType="floatType"/>

</set>
</item>
</selector>

给第二行第二列元素指定动画：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:duration="@android:integer/config_shortAnimTime"

android:propertyName="ScaleX"

android:valueTo="0" android:valueType="floatType" />
<objectAnimator android:duration="@android:integer/config_shortAnimTime"

android:propertyName="ScaleY"

android:valueTo="0" android:valueType="floatType" />
</set>
</item>
<item android:state_pressed="false">
<set>
<objectAnimator android:duration="100" android:propertyName="ScaleX" android:valueTo="1" android:valueType="floatType" />
<objectAnimator android:duration="@android:integer/config_shortAnimTime"

android:propertyName="ScaleY"

android:valueTo="1" android:valueType="floatType" />
</set>
</item>
</selector>

给第三行第三列指定动画：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationY"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="80dp"
android:valueType="floatType"/>
<objectAnimator android:propertyName="translationX"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="80dp"
android:valueType="floatType"/>
</set>
</item>
<item
android:state_pressed="false"
>
<set>
<objectAnimator android:propertyName="translationY"
android:duration="100"
android:valueTo="0dp"
android:valueType="floatType"/>
<objectAnimator android:propertyName="translationX"
android:duration="100"
android:valueTo="0dp"
android:valueType="floatType"/>
</set>
</item>
</selector>

上面代码实现了部分元素的动画效果，其余动画效果与之相仿，它们的共同特点是分别设置了元素被点击和未被点击时的动画效果，而元素移动的方向主要用属性

android:propertyName

来设置，若为值为

"translationY"

，则表示元素在纵向上有位移；若为

"translationX"

,则表示元素在横向上有位移；若为

"ScaleX"

或

"ScaleY"

，表示元素自身在横轴或纵轴上有伸缩。而屏幕规定的坐标轴是以左上角为原点，水平向右的方向是X轴的正方向，铅直向下的方向是Y轴的正方向。通过这个规定，就可以通过属性

android:valueTo

来确定元素运动的方向和距离：元素向左移动80dp，可将属性

android:propertyName

设为

"translationX"

，属性

android:valueTo

设为设为”-80dp”；元素向右下方移动80dp，可以同事指定两个属性动画，其中一个属性

android:propertyName

设为

"translationX"

，属性

android:valueTo

设为设为”80dp”，另一个属性

android:propertyName

设为

"translationY"

，属性

android:valueTo

设为设为”80dp”，若希望元素被点击时消失，可指定两个属性动画，其中一个为

android:propertyName="ScaleX" android:valueTo="0"

，另一个为

android:propertyName="ScaleY" android:valueTo="0"

。