一起Talk Android吧（第五百四十五回：如何实现流水动画）

各位看官们大家好，上一回中咱们说的例子是"无进度值ProgressBar",本章回中介绍的例子是" 如何实现流水动画"。闲话休提，言归正转，让我们一起Talk Android吧！

概念介绍

上一章回中在进度条内使用了动画文件，不过没有详细介绍，我们在本章回中将详细介绍此动画文件，我们称这类动画为流水动画，因为它的效果是向水流一样的直线，如果大家不理解的话，可以参考下面的动画：

实现方法

平移动画

我们先有一个整体的思路：创建一个直线然后将它从左向右移动，创建直线使用drawable中的shap，移动使用平移类动画。下面是具体的实现步骤：

1. 创建drawable资源文件，也就是动画中使用的直线，为了好看，代码中使用了渐变色。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<!--    不指定宽度时默认为无限大-->
<!--    android:width="100dp"-->
    <size
        android:height="1dp">
    </size>
    <!--    填充色-->
    <solid android:color="@color/color_text_gray"/>
    <gradient
        android:startColor="#FF00FF"
        android:centerColor="@color/white"
        android:centerX="0.2"
        android:endColor="@color/white"
        android:angle="0"
        />
</shape>

2. 创建动画文件,动画是平移类动画，主要用来移动直线。

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromYDelta="0"
        android:fromXDelta="0"
        android:toYDelta="0%"
        android:toXDelta="100%"
        android:duration="2001">
</translate>

上面的动画是从左到右移动直线(文件名line_translate_to_large.xml)，下面的动画是从右到左移动直线(文件名：line_translate_to_small.xml)。动画的的思路是让图像的x轴从0变到最大，或者从最大变到0.

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="100%"
    android:fromXDelta="100%"
    android:toYDelta="100%"
    android:toXDelta="0"
    android:duration="2001">
</translate>

3. 创建ImageView组件，该组件用来显示直线，把直线赋值给它的src属性就可以。

<ImageView
    android:layout_marginTop="66dp"
    android:id="@+id/id_line"
    android:src="@drawable/line_with_color1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</ImageView>

4. 给ImageVeiw绑定动画,这样就可以使用动画来操作直线。因为ImageView是直线的载体。

mIVLine = mBinding.idLine;  //通过视图绑定获取ImageView组件
Animation animation1 = AnimationUtils.loadAnimation(this,R.anim.line_translate_to_large);
Animation animation2 = AnimationUtils.loadAnimation(this,R.anim.line_translate_to_small);
animation1.setRepeatCount(ValueAnimator.INFINITE);
animation2.setRepeatCount(ValueAnimator.INFINITE);
//        mIVLine.startAnimation(animation1);
mIVLine.startAnimation(animation2);

逐帧动画

使用逐帧动画也可以实现流水动画，具体的思路：把一个条直线分为n部分，每部分表示一帧，通过逐帧动画播放所有的帧进而实现流水效果，下面是具体的效果图：

1. 创建drawable资源文件，代码中使用渐变色，一共五个文件，表示把直线分成五部分,文件名为line_with_color1，2，3，4，5。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:height="1dp">
    </size>
    <solid android:color="@color/color_text_gray"/>
    <gradient
        android:startColor="#FF00FF"
        android:centerColor="@color/white"
        android:centerX="0.2"
        android:endColor="@color/white"
        android:angle="0"
        />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    android:shape="rectangle">
    <size
        android:height="1dp">
    </size>
    <solid android:color="@color/color_text_gray"/>
    <gradient
        android:startColor="#FF00FF"
        android:centerColor="@color/white"
        android:centerX="0.4"
        android:endColor="@color/white"
        android:angle="0"
        />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    android:shape="rectangle">
    <size
        android:height="1dp">
    </size>
    <solid android:color="@color/color_text_gray"/>
    <gradient
        android:startColor="@color/white"
        android:centerColor="#FF00FF"
        android:centerX="0.55"
        android:endColor="@color/white"
        android:angle="0"
        />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    android:shape="rectangle">
    <size
        android:height="1dp">
    </size>
    <solid android:color="@color/color_text_gray"/>
    <gradient
        android:startColor="@color/white"
        android:centerColor="@color/white"
        android:centerX="0.6"
        android:endColor="#FF00FF"
        android:angle="0"
        />
</shape>


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    android:shape="rectangle">
    <size
        android:height="1dp">
    </size>
    <solid android:color="@color/color_text_gray"/>
    <gradient
        android:startColor="@color/white"
        android:centerColor="@color/white"
        android:centerX="0.9"
        android:endColor="#FF00FF"
        android:angle="0"
        />
</shape>

2. 创建动画文件，使用animation-list把五个文件包含起来，形成动画集合，每个文件相当于动画中的一帧。下面是详细的代码：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/line_with_color1" android:duration="500"> </item>
    <item android:drawable="@drawable/line_with_color2" android:duration="500"> </item>
    <item android:drawable="@drawable/line_with_color3" android:duration="500"> </item>
    <item android:drawable="@drawable/line_with_color4" android:duration="500"> </item>
    <item android:drawable="@drawable/line_with_color5" android:duration="500"> </item>
</animation-list>

代码中的duration表示每帧的播放时间，单位为ms，它可以控制动画的速度，也就是流水的速度，时间值越小流水速度越快，反之越慢。

item中包含了上面定义的文件，每个item表示一帧，每帧相当于直线中的一部分。我使用渐变色来区分不同的帧，从整体上看渐变色中最亮的紫色，从第一帧到最后一帧依次从左到右偏移，下面是偏移效果图。从上到上看，紫色依次从左到向偏移。我在这里使用的是drawable来表示直线，也可以使用图片来表示直线，不过图片中的颜色也要保持同样的效果。

3. 创建ImageView，主要用来显示直线，把动画集赋值给它的src属性就可以。

<ImageView
    android:layout_marginTop="66dp"
    android:id="@+id/id_line"
    android:src="@drawable/line_animation_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</ImageView>

4. 给ImageVeiw绑定动画

mIVLine = mBinding.idLine;
AnimationDrawable animationDrawable = (AnimationDrawable) mIVLine.getDrawable();
animationDrawable.start();

经验总结

实现流水动画的核心思路就是平移图片，围绕此思路，我们给出了两种实现方法，不过逐帧动画的效果比直接平移动画的效果好一些。

直接平移时会有空白，因此有种不连贯的感觉。而逐帧动画平移时其它帧会补充空白，看上去很连贯。如果把逐帧动画中的文件替换成图片的话效果更加好，在此基础上增加图片的数量相当于增加了帧的数量，这样做出的动画效果更加丝滑。

看官们，关于"如何实现流水动画"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！