Android自定义View-一个可可爱爱的波浪特效

1. 概述

最近开始学习自定义View，看到现在公司项目上的一个动画效果，顿时想到其实可以自己画，于是就开始着手优（zhuang）化（bi）这个动画。

动画如下：

其实很简单对不对，但初学者的我还是要思考一下。

2. 动画分解

动画有两部分，

• 第一个是背景，这个直接画bitmap就可以了。
• 第二个就是这个波浪，我们仔细观察这个波浪其实是一个有规律的，基于每一个点的原点Y轴方向的不断拉伸。 但是，每一个点，其拉伸的量不一致，而且时间也有差错。

根据UI提供的详细动画细节，可以知道：

• 动效总共时间为2S，之后反复循环，每秒帧数为24帧，其中圆形元素控件大小为6px，拉伸都是以圆心为拉伸中心点进行拉伸。 0-1s为从左到右的拉伸动画，1s-2s为从右到左的拉伸动画，之后为循环。

• 每一个点，都有5种不同的拉伸量，这里我们把对应的拉伸后的Y的高度命名为：

public float maxHeight;
public float threeHeight;
public float halfHeight;
public float oneHeight;

其中还有一种拉伸量为0。maxHeight是最大的高度，threeHeight为次最高高度。

列出几个关键帧（约定，从左到右将元素命名为元素1、元素2、元素3、元素4、元素5）

• 第1帧： 初始化，每一个的点均为 6 px * 6 px

• 第2帧： 元素1 高7.3px 对应 oneHeight，其他元素保持初始状态。

• 第3帧： 元素1 高11px 对应 halfHeight，其他元素保持初始状态

• 第4帧： 元素1 高14.7px 对应 threeHeight，元素2 高8.3px 对应 oneHeight，其他元素保持初始状态。

• 第5帧： 元素1 高16px 对应 maxHeight，元素2 高15px 对应 halfHeight，其他元素保持初始状态。

• 第6帧： 元素1 高14.7px 对应 threeHeight，元素2 高21.7px 对应 threeHeight，元素3 高10.1px 对应 oneHeight，其他元素保持初始状态。

... 通过观察，我...先定义一个类，来存储这些点的四种拉伸量的高度（我们也称之为状态）和中心位置的坐标：

public class VoiceAnimPoint {
    public int centerX, centerY;
    public float maxHeight;
    public float threeHeight;
    public float halfHeight;
    public float oneHeight;
    public VoiceAnimPoint(int centerX, int centerY, float maxHeight,