Android Animation用于赋予UI丰富的外观。
可以通过XML或者android代码执行android应用中的动画。
在此android动画教程中，我们将使用XML代码将动画添加到我们的应用程序中。

Android动画

android应用中的动画是创建运动和形状变化的过程。
我们将在本教程中介绍的动画的基本方法是：

• 淡入动画
• 淡出动画
• 淡入淡出动画
• 眨眼动画
• 放大动画
• 缩小动画
• 旋转动画
• 移动动画
• 向上滑动动画
• 向下滑动动画
• 弹跳动画
• 顺序动画
• 一起动画

Android动画示例XML

我们在res文件夹名称anim下创建一个资源目录，以保留所有包含动画逻辑的xml文件。
以下是显示android动画代码逻辑的示例xml文件。

sample_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="https://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:duration="300"
android:fillAfter="true"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" 

• android：interpolator：这是动画的变化率。
  我们可以使用时间作为约束来定义自己的插值器。
  在上面的xml代码中，分配了一个内置的插值器
• android：duration：动画应其中完成的持续时间。
  这里是300毫秒。
  通常，这是在屏幕上显示过渡的理想持续时间。
  动画的开始和结束使用以下命令设置：
• TRANSFORMATION：是我们要指定的转换。
  在我们的例子中，我们以x和y标度为0开始，以x和y标度为1结束
• android：fillAfter：属性指定在动画结束时视图是可见还是隐藏。
  我们在上面的代码中将其设置为可见。
  如果设置为false，则元素在动画后更改为其先前的状态
• android：startOffset：这是动画开始之前的等待时间。
  此属性主要用于按顺序执行多个动画
• android：repeatMode：当您要重复动画时，这很有用
• android：repeatCount：这定义了动画的重复次数。
  如果我们将此值设置为无限，那么动画将重复无限次

单击UI小部件时加载动画

我们的目的是在单击任何小部件(例如TextView)时显示动画。
为此，我们需要使用" Animation"类。
包含动画逻辑的xml文件是通过AnimationUtils类通过调用loadAnimation()函数加载的。
以下代码段显示了此实现。

android:fromTRANSFORMATION
android:toTRANSFORMATION

要开始动画，我们需要在UI元素上调用startAnimation()函数，如下面的代码片段所示：

Animation animation;
animation = AnimationUtils.loadAnimation(getApplicationContext(),
              R.anim.sample_animation);

其中我们通过传递Animation类型作为参数在textview组件上执行动画。

设置动画监听器

仅在我们希望收听开始，结束或者重复之类的事件时才需要这样做。
为此，活动必须实现AnimationListener，并且以下方法需要被覆盖。

• onAnimationStart：动画开始后将触发此操作
• onAnimationEnd：动画结束后将触发此操作
• onAnimationRepeat：如果动画重复，将触发

Android动画项目结构

如您所见，我们包含了上面介绍的所有主要动画类型的xml。

Android动画示例XML代码

其中我为大多数常见的android动画提供示例代码。

淡入动画

fade_in.xml

sampleTextView.startAnimation(animation);

此处的alpha表示对象的不透明度。
具有较低alpha值的对象更透明，而具有较高alpha值的对象不那么透明，更不透明。
淡入淡出只是将alpha值从0增加到1。

淡出动画

fade_out.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true" >

  <alpha
      android:duration="1000"
      android:fromAlpha="0.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:toAlpha="1.0" 

</set>

淡出android动画与淡入完全相反，我们需要将alpha值从1减小到0。

交叉淡入淡出动画

交叉淡入淡出在一个TextView上执行动画淡入，而其他TextView在淡出。
这可以通过在两个TextView上使用" fade_in.xml"和" fade_out.xml"来完成。
该代码将在MainActivity.java中讨论。

眨眼动画

blink.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true" >

  <alpha
      android:duration="1000"
      android:fromAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:toAlpha="0.0" 

</set>

每次淡入和淡出均以反向模式无限执行。

放大动画

zoom_in.xml

<set xmlns:android="https://schemas.android.com/apk/res/android">
  <alpha android:fromAlpha="0.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="600"
      android:repeatMode="reverse"
      android:repeatCount="infinite"
</set>

我们使用pivotX =" 50％""和pivotY =" 50％""从元素中心进行缩放。

缩小动画

zoom_out.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true" >

  <scale
      xmlns:android="https://schemas.android.com/apk/res/android"
      android:duration="1000"
      android:fromXScale="1"
      android:fromYScale="1"
      android:pivotX="50%"
      android:pivotY="50%"
      android:toXScale="3"
      android:toYScale="3" >
  </scale>

</set>

注意android：from和android：to在zoom_in.xml和zoom_out.xml中是相反的。

旋转动画

rotate.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true" >

  <scale
      xmlns:android="https://schemas.android.com/apk/res/android"
      android:duration="1000"
      android:fromXScale="1.0"
      android:fromYScale="1.0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:toXScale="0.5"
      android:toYScale="0.5" >
  </scale>

</set>

这里使用from/toDegrees标签指定度数，并使用循环插值器。

移动动画

move.xml

<set xmlns:android="https://schemas.android.com/apk/res/android">
  <rotate android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="600"
      android:repeatMode="restart"
      android:repeatCount="infinite"
      android:interpolator="@android:anim/cycle_interpolator"

</set>

向上滑动动画

slide_up.xml

<set
  xmlns:android="https://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/linear_interpolator"
  android:fillAfter="true">

 <translate
      android:fromXDelta="0%p"
      android:toXDelta="75%p"
      android:duration="800" 
</set>

这是通过在scale标签内设置android：fromYScale =" 1.0"和android：toYScale =" 0.0"来实现的。

向下滑动动画

slide_down.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true" >

  <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="1.0"
      android:interpolator="@android:anim/linear_interpolator"
      android:toXScale="1.0"
      android:toYScale="0.0" 

</set>

这与" slide_up.xml"相反。

弹跳动画

bounce.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true">

  <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="0.0"
      android:toXScale="1.0"
      android:toYScale="1.0" 

</set>

其中反弹插值器用于以反弹方式完成动画。

顺序动画

sequential.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true"
  android:interpolator="@android:anim/bounce_interpolator">

  <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="0.0"
      android:toXScale="1.0"
      android:toYScale="1.0" 

</set>

其中从过渡中使用了另一个android：startOffset来使它们保持顺序。

一起动画

together.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true"
  android:interpolator="@android:anim/linear_interpolator" >

  <!-- Move -->
  <translate
      android:duration="800"
      android:fillAfter="true"
      android:fromXDelta="0%p"
      android:startOffset="300"
      android:toXDelta="75%p" 
  <translate
      android:duration="800"
      android:fillAfter="true"
      android:fromYDelta="0%p"
      android:startOffset="1100"
      android:toYDelta="70%p" 
  <translate
      android:duration="800"
      android:fillAfter="true"
      android:fromXDelta="0%p"
      android:startOffset="1900"
      android:toXDelta="-75%p" 
  <translate
      android:duration="800"
      android:fillAfter="true"
      android:fromYDelta="0%p"
      android:startOffset="2700"
      android:toYDelta="-70%p" 

  <!-- Rotate 360 degrees -->
  <rotate
      android:duration="1000"
      android:fromDegrees="0"
      android:interpolator="@android:anim/cycle_interpolator"
      android:pivotX="50%"
      android:pivotY="50%"
      android:startOffset="3800"
      android:repeatCount="infinite"
      android:repeatMode="restart"
      android:toDegrees="360" 

</set>

在这里android：startOffset被删除以使它们同时发生。

码

" activity_main.xml"布局由" ScrollView"和" RelativeLayout"(我们将在以后的教程中进行讨论)组成，其中每种动画类型均使用其各自的按钮被调用。
xml文件如下所示：

activity_main.xml

<set xmlns:android="https://schemas.android.com/apk/res/android"
  android:fillAfter="true"
  android:interpolator="@android:anim/linear_interpolator" >

  
  <!-- Move -->
  <scale
      xmlns:android="https://schemas.android.com/apk/res/android"
      android:duration="4000"
      android:fromXScale="1"
      android:fromYScale="1"
      android:pivotX="50%"
      android:pivotY="50%"
      android:toXScale="4"
      android:toYScale="4" >
  </scale>

  <!-- Rotate 180 degrees -->
  <rotate
      android:duration="500"
      android:fromDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:repeatCount="infinite"
      android:repeatMode="restart"
      android:toDegrees="360" 

</set>

总而言之，一个" RelativeLayout"，顾名思义，UI组件的布置是相对的。

MainActivity.java文件包含与动画类型相关的每个按钮的onClick侦听器。
它的源代码如下。

<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <Button
              android:id="@+id/btnFadeIn"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:text="Fade In" 

      <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textAppearance="?android:attr/textAppearanceMedium"
              android:text="Fade In"
              android:id="@+id/txt_fade_in"
          android:layout_alignBottom="@+id/btnFadeIn"
          android:layout_alignLeft="@+id/txt_fade_out"
          android:layout_alignStart="@+id/txt_fade_out" 

      <Button
              android:id="@+id/btnFadeOut"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnFadeIn"
              android:text="Fade Out" 

      <Button
              android:id="@+id/btnCrossFade"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnFadeOut"
              android:text="Cross Fade" 

      <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textAppearance="?android:attr/textAppearanceMedium"
              android:text="Cross Fade In"
              android:id="@+id/txt_out"
              android:visibility="gone"
              android:layout_gravity="center_horizontal"
              android:layout_alignTop="@+id/txt_in"
              android:layout_alignLeft="@+id/txt_in"
              android:layout_alignStart="@+id/txt_in" 

      <Button
              android:id="@+id/btnBlink"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnCrossFade"
              android:text="Blink" 

      <Button
              android:id="@+id/btnZoomIn"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnBlink"
              android:text="Zoom In" 

      <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textAppearance="?android:attr/textAppearanceMedium"
              android:text="Blink"
              android:id="@+id/txt_blink"
              android:layout_gravity="center_horizontal"
          android:layout_alignBottom="@+id/btnBlink"
          android:layout_alignLeft="@+id/txt_zoom_in"
          android:layout_alignStart="@+id/txt_zoom_in" 

      <Button
              android:id="@+id/btnZoomOut"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnZoomIn"
              android:text="Zoom Out" 

      <Button
              android:id="@+id/btnRotate"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnZoomOut"
              android:text="Rotate" 

      <Button
              android:id="@+id/btnMove"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnRotate"
              android:text="Move" 

      <Button
              android:id="@+id/btnSlideUp"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnMove"
              android:text="Slide Up" 

      <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textAppearance="?android:attr/textAppearanceMedium"
              android:text="Fade Out"
              android:id="@+id/txt_fade_out"
              android:layout_gravity="center_horizontal"
          android:layout_alignBottom="@+id/btnFadeOut"
          android:layout_alignLeft="@+id/txt_in"
          android:layout_alignStart="@+id/txt_in" 

      <Button
              android:id="@+id/btnSlideDown"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnSlideUp"
              android:text="Slide Down" 

      <Button
              android:id="@+id/btnBounce"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnSlideDown"
              android:text="Bounce" 

      <Button
              android:id="@+id/btnSequential"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:layout_below="@id/btnBounce"
              android:text="Sequential Animation" 

      <Button
              android:id="@+id/btnTogether"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_below="@id/btnSequential"
              android:layout_margin="5dp"
              android:text="Together Animation" 

      <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textAppearance="?android:attr/textAppearanceMedium"
              android:text="Cross Fade Out"
              android:id="@+id/txt_in"
              android:layout_gravity="center_horizontal"
          android:layout_alignBottom="@+id/btnCrossFade"
          android:layout_alignLeft="@+id/txt_blink"
          android:layout_alignStart="@+id/txt_blink" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Zoom In"
          android:id="@+id/txt_zoom_in"
          android:layout_alignBottom="@+id/btnZoomIn"
          android:layout_alignLeft="@+id/txt_zoom_out"
          android:layout_alignStart="@+id/txt_zoom_out" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Zoom Out"
          android:id="@+id/txt_zoom_out"
          android:layout_alignBottom="@+id/btnZoomOut"
          android:layout_toRightOf="@+id/btnSequential"
          android:layout_toEndOf="@+id/btnSequential" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Rotate"
          android:id="@+id/txt_rotate"
          android:layout_above="@+id/btnMove"
          android:layout_toRightOf="@+id/btnSequential"
          android:layout_toEndOf="@+id/btnSequential" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Move"
          android:id="@+id/txt_move"
          android:layout_alignBottom="@+id/btnMove"
          android:layout_alignLeft="@+id/txt_slide_up"
          android:layout_alignStart="@+id/txt_slide_up" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Slide Up"
          android:id="@+id/txt_slide_up"
          android:layout_alignBottom="@+id/btnSlideUp"
          android:layout_toRightOf="@+id/btnSequential"
          android:layout_toEndOf="@+id/btnSequential" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Slide Down"
          android:id="@+id/txt_slide_down"
          android:layout_alignBottom="@+id/btnSlideDown"
          android:layout_alignLeft="@+id/txt_slide_up"
          android:layout_alignStart="@+id/txt_slide_up" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Bounce"
          android:id="@+id/txt_bounce"
          android:layout_alignBottom="@+id/btnBounce"
          android:layout_alignLeft="@+id/txt_slide_down"
          android:layout_alignStart="@+id/txt_slide_down" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Sequential"
          android:id="@+id/txt_seq"
          android:layout_alignBottom="@+id/btnSequential"
          android:layout_alignLeft="@+id/txt_bounce"
          android:layout_alignStart="@+id/txt_bounce" 

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:text="Together"
          android:id="@+id/txt_tog"
          android:layout_alignBottom="@+id/btnTogether"
          android:layout_toRightOf="@+id/btnSequential"
          android:layout_toEndOf="@+id/btnSequential" 

  </RelativeLayout>

</ScrollView>

如之前所讨论的，每个textView动画都是通过调用相应的动画对象来启动的，其中动画逻辑由AnimationUtils.loadAnimation()方法加载到其中。
crossFade动画包含两个TextView，其中一个淡出，另一个淡入。

请注意，在模拟器上运行时，这些动画不会很流畅，因此建议在普通设备上运行该应用程序。