本文主讲一种动画的实现方式：在自定义View的onDraw()方法的最后调用invalidate()来实现持续绘制更新画面，在onDraw()中根据流逝的时间来计算图像当前的位置、形状，即实现了动画。详见下文
优势：更可控，动画播放速度、方向等等可自由控制、随时变更；可以通过监听触摸事件来实现可触摸交互的动画。(本文以匀速运动为例，如需变速、响应触摸需要自行修改代码)
完整代码见最后
波浪效果图.gif
上图是一个循环的周期性动画，通过如下方式便实现了循环，onDraw方法会被不停地反复调用
@Override
protected void onDraw(Canvas canvas) {
//TODO 根据时间的流逝绘制图像
invalidate();
}
接着是绘制，最终效果图中是两道波浪，先以一道波浪为例
概览
矩形表示view的边框，让波浪持续往右移动，在View的边框内就会形成波浪动画
关键是当每一次onDraw被调用的时候，需要根据当前的时间计算出波浪的位置。如下为匀速运动的计算方法
动画进度 = ( (当前时间 - 起点时间) % 周期时长 )/ 周期时长
% 为java取模运算符
这里用到AnimationUtils.currentAnimationTimeMillis()来获取系统开机后至今的毫秒值。将其保存为静态变量作为起点时间，可以使App内所有的波浪动画的进度同步(因为都根据同一个起点时间、同一个周期长度来计算动画进度)
private static long startTime = AnimationUtils.currentAnimationTimeMillis();
在onDraw中再次调用AnimationUtils.currentAnimationTimeMillis()获得当前时间，即可在每次onDraw被调用时都计算出动画进度。再根据波浪图形的初始起点位置，计算出波浪的位置。
当前位置 = (终点位置 - 起点位置)* 动画进度
在代码中用path.offset()来实现偏移
以下为完整代码，需要注意，前文中是以背景层波浪为例的，即波浪向右移动。前景波浪是向左移动
public class WaveRelativeLayoutView extends RelativeLayout {
//前景波浪的周期时间
private static final float FOREGROUND_PERIODIC_TIME = 5000;
//背景波浪的周期时间
private static final float BACKGROUND_PERIODIC_TIME = 3000;
public WaveRelativeLayoutView(Context context) {
super(context);
init();
}
public WaveRelativeLayoutView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private static long startTime = AnimationUtils.currentAnimationTimeMillis();
private Path mForegroundWavePath = new Path();
private Path mBackgroundWavePath = new Path();
private Paint mForegroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private void init() {
mForegroundPaint.setColor(Color.parseColor("#d8475b"));
mForegroundPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mBackgroundPaint.setColor(Color.parseColor("#cb4053"));
mBackgroundPaint.setStyle(Paint.Style.FILL_AND_STROKE);
//ViewGroup 在没有背景时不会调用onDraw，所以需要手动设置一个background
if (getBackground() == null) {
setBackgroundColor(Color.TRANSPARENT);
}
}
@Override
protected void onDraw(Canvas canvas) {
float pasedTime = AnimationUtils.currentAnimationTimeMillis() - startTime;
//------前景层的波浪-------
mForegroundWavePath.reset();
int startY = 0;
//此处的waveLen实际为贝塞尔曲线中每一个控制点的间距，修改这个值可以改变波长，但不直接等于波长
float waveLen = getWidth() / 4f;
//此处的WaveHeight实际为贝塞尔曲线中每一个控制点的高度，修改这个值可以改变浪高，但不直接等于浪高
float foregroundWaveHeight = 30;
float backgroundWaveHeight = 40;
mForegroundWavePath.moveTo(-getWidth(), startY);
//初始时，View左侧不可见的波浪
mForegroundWavePath.quadTo(waveLen * -3f, foregroundWaveHeight,waveLen * -2, startY);
mForegroundWavePath.quadTo(waveLen * -1, -foregroundWaveHeight, 0,startY);
//初始时，View内可见波浪
mForegroundWavePath.quadTo(waveLen, foregroundWaveHeight, waveLen *2, startY);
mForegroundWavePath.quadTo(waveLen * 3, -foregroundWaveHeight,waveLen * 4, startY);
mForegroundWavePath.lineTo(getWidth(), getHeight());
mForegroundWavePath.lineTo(-getWidth(), getHeight());
mForegroundWavePath.close();
//根据流逝的时间、周期长短 来计算偏移量，得到‘当前位置’
float currTimeForeground = pasedTime % FOREGROUND_PERIODIC_TIME;
//注意：前景波浪是向左移动的
mForegroundWavePath.offset(getWidth() * (FOREGROUND_PERIODIC_TIME -currTimeForeground) /
FOREGROUND_PERIODIC_TIME, getHeight() / 2 + 10);
//------背景层波浪-------
mBackgroundWavePath.reset();
mBackgroundWavePath.moveTo(-getWidth(), startY);
//初始时，View左侧不可见的波浪
mBackgroundWavePath.quadTo(waveLen * -3f, backgroundWaveHeight,waveLen * -2, startY);
mBackgroundWavePath.quadTo(waveLen * -1, -backgroundWaveHeight, 0,startY);
//初始时，View内可见波浪
mBackgroundWavePath.quadTo(waveLen, backgroundWaveHeight, waveLen* 2, startY);
mBackgroundWavePath.quadTo(waveLen * 3, -backgroundWaveHeight,waveLen * 4, startY);
mBackgroundWavePath.lineTo(getWidth(), getHeight());
mBackgroundWavePath.lineTo(-getWidth(), getHeight());
mBackgroundWavePath.close();
float currTimeBackground = pasedTime % BACKGROUND_PERIODIC_TIME;
//根据流逝的时间、周期长短 来计算偏移量，得到‘当前位置’
mBackgroundWavePath.offset(getWidth() * currTimeBackground /BACKGROUND_PERIODIC_TIME,
getHeight() / 2 - 10);
canvas.drawPath(mBackgroundWavePath, mBackgroundPaint);
canvas.drawPath(mForegroundWavePath, mForegroundPaint);
invalidate();
}
}
