Android 中的帧动画

Question

动画可以为你的 app 注入活力与个性。让我们来看看实现动画的一个子类：帧动画(Frame Animation)，从名字上可以看出，这种动画是一帧一帧的绘制出来的。

在谷歌的 Material Design 官方专题中，花了整整一页来介绍 Delightful Details ，其中有帧动画的绝佳例子。

真是精美的动画！不幸的是，这个页面上没有丁点关于如何实现这种效果的参考链接，所以我就来帮忙了！我们将讲解一遍如何制作空心心形到实心心形的过渡动画，然后讲解与之反向的动画。效果如下：

图片序列

帧动画的原理很简单:就像老式电影胶卷那样，快速掠过一些列的图片，“帧”其实就是一张图片，因此创建一个自定义帧动画的第一步就是建立图片序列。

我们有两种选择：使用 xml 的 drawable（比如 shape drawable）或者是使用实际的图片。简便起见，我们直接使用下面的一些列 PNG 图片：

在产品级的应用中，我们还需要保证图片尺寸可以适配不同的屏幕分辨率。但是现在，我们将所有的图片都扔到 res/drawable-mdpi 目录下完事。我推荐图片的命名采用自描述的方式，比如 ic_heart_0.png, ic_heart_1.png 以此类推。。。这样我们就不需要查看图片就知道图片的顺序。

但谁叫我是屌丝呢，我选择将图片按照填充的百分比程度命名。

XML Drawable

现在我们已经有了要掠一遍的图片，下一步就是为动画定义一个 XML 的 Drawable，我们又遇到了两种选择：Animation-list 和 Animated-selector。

Animation-List

Animation-list 是帧动画的默认选择，因为在 API 1 的时候就有了，同时它非常简单。就是简单的掠过指定顺序和持续时间的图片序列。

这里是填充到实心效果的 Animation-list 的例子，在 res/drawable/animation_list_filling.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="true">

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_0"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_25"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_50"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_75"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_100"/>

</animation-list>

列表中的每一个 item 都指向图片序列中的一张图片。我们只需把它们的顺序摆放正确并且添加一个毫秒为单位的持续时间即可。

下面是实现变为空心效果的 Animation-list，在 res/drawable/animation_list_emptying.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="true">

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_100"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_75"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_50"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_25"/>

  <item
    android:duration="500"
    android:drawable="@drawable/ic_heart_0"/>

</animation-list>

你可能注意到了，在两个代码片段中都有 android:oneshot=”true”,这是 animation-list 的一个属性，表示播放完一次动画之后便停止动画。如果这个属性值设置为“false”，则动画会重复播放。

在实际产品中，500 毫秒时间太长，但是作为演示，我有意夸大了这个时间。还有一点，5 帧图片对于产生流畅的过渡来说还是不够多。使用多少帧以及每帧的显示时间取决于个人。作为参考，我觉得 15 毫秒的 15 帧图片就可以非常流畅了。

Animated-Selector

Animated-selector 要稍微复杂一些，因为它是基于状态的。根据 View 的状态（比如选中与激活状态），selector 将使用提供的 Transition 来过渡到正确的状态。Animated-selector 只在 Lollipop 上有效，因此我们需要在-v21 package 中也定义一个 xml。

下面是一个 Animated-selector 的例子，放在 res/drawable-v21/selector.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item
    android:id="@+id/on"
    android:state_activated="true">
    <bitmap
      android:src="@drawable/ic_heart_100"/>
  </item>

  <item
    android:id="@+id/off">
    <bitmap
      android:src="@drawable/ic_heart_0"/>
  </item>

  <transition
    android:fromId="@+id/on"
    android:toId="@+id/off"
    android:drawable="@drawable/animation_emptying">
  </transition>

  <transition
    android:fromId="@id/off"
    android:toId="@id/on"
    android:drawable="@drawable/animation_filling">
  </transition>

</animated-selector>

仔细观察它是如何将前面定义的 Animation-list 引用为 Transition 的。

这个 animated-selector 没有任何问题，但是我们需要考虑非 Lollipop 设备。我们在 res/drawable/selector.xml 中定义一个没有动画的 selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item
    android:state_activated="true">
    <bitmap android:src="@drawable/ic_heart_100"/>
  </item>

  <item
    android:state_activated="false">
    <bitmap android:src="@drawable/ic_heart_0"/>
  </item>

</selector>

现在我们的 selector 在任意设备上都可以工作。因为我们只使用了一般的 selector，如果在 Lollipop 以前的设备上，animated-selector 将直接跳过过渡动画，直接到结束状态。当然 Lollipop 设备是有我们在 animated-selector 中定义的过渡效果的。

在上面的代码片段中，animated-selector 只关注了 android:state_activated 属性。就如一般的 selector 一样，我为不同的状态定义了不同的 item，但不同的是，我们还定义了不同状态间动画过渡的 transition。在这个例子中，我直接将 transition 指向前面定义好了的 animation-list。

现在我们有了四个 xml 文件：一个充到实心效果的 xml，实心到空心的 xml，两个在空心实心之间切换的 xml。

设置 ImageView

现在可以设置一些图片来玩了。我们这里有三个 ImageView，分别对应前面定义的三个 XML Drawable。将下面的代码放到你的 Activity 的布局中：

<ImageView
  android:id="@+id/imageview_animation_list_filling"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/animation_list_filling"
  />

<ImageView
  android:id="@+id/imageview_animation_list_emptying"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/animation_list_emptying"
  />

 <ImageView
  android:id="@+id/imageview_animated_selector"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/selector"
  />

这只是几个 id 唯一，背景为我们定义的 xml Drawable 的 ImageView。

开始动画

开始动画的方式在两种实现方法中是不一样的，我们先从 animation-list 开始：

Animation-List

在 Activity 中，我们得到 ImageView 的引用，然后开始动画。如下：

ImageView mImageViewFilling = (ImageView) findViewById(R.id.imageview_animation_list_filling);
((AnimationDrawable) mImageViewFilling.getBackground()).start();

下面是效果：

接下来是它的搭档-反向过程（除了 id 都是一样的）

ImageView mImageViewEmptying = (ImageView) findViewById(R.id.imageview_animation_list_emptying);
((AnimationDrawable) mImageViewEmptying.getBackground()).start();

效果如下：

这些代码可以放在 onCreate（在 Activity 开始的时候自动开始）或者一个 OnClickListener（等待用户触发）中，取决于你自己！

Animated-Selector

当使用 Animated-selector 的时候，动画将在状态条件满足 selector 的时候被触发。在我们这个简单的例子中，我们在 Activity 的 onCreate 方法中为 ImageView 添加一个 click listener：

mImageViewSelector.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
    mImageViewSelector.setActivated(!mImageViewSelector.isActivated());
  }
});

当用户点击心形，它将会根据当前的状态在实心与空心之间切换，下面是我的心形循环显示的 gif 图：

Delightful Details

Frame Animations have the power to surprise and delight users, plus it’s fun to add little personal touches to an app. Go forth and animate! 帧动画可以取悦你的用户，为 app 增添个性，搞起！