Flutter 绘制波浪移动动画效果，曲线和折线图

简介

上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状，可以看到有了图形的平面绘制数学计算方法，我们可以画出所需的形状。本篇我们来介绍线条类图形的绘制，并且结合 Animation 实现了常见的波浪动效。通过本篇，你可以了解到：

• 正弦曲线的绘制
• 利用两条正弦曲线加上 Animation 实现波浪动效
• 曲线的一般绘制方法
• 折线图绘制

下面是最终实现的效果图，接下来我们一项一项介绍。

正弦曲线绘制

对于正弦曲线，公式定义如下：

对于在屏幕绘制，由于屏幕的点都是离散的，因此实际就是对正弦曲线进行采样，只要采样间隔足够密集，画出来的效果肉眼上很难区分是离散点之间通过连线完成绘制的。因此，绘制正弦曲线其实就是将正弦曲线的点依次连起来就好了。下面是绘制的实现代码，waveHeight是正弦曲线的振幅，这里我们一个屏幕宽度绘制一个周期，因此使用的是 2 * pi * i / size.width。