本文主讲一种动画的实现方式：在自定义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();

}

}