Android Path绘制贝塞尔曲线波浪动画

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