前言
前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径、语音播报以及生活指数等服务，支持定位、删除、搜索等操作。
下图为主页效果，点击下载 进行体验：
项目中运用了大量的自定义绘制 widget，首页丰富的 自定义 chart 效果和炫酷的天气背景动效。天气背景动效在不同的天气气象下展示不同的效果。目前一共实现了 14 种类别，其中有，晴、晴晚、多云、阴天、小中大雨、小中大雪、雾、霾、浮尘以及雷暴。背景动效一共分为三层：
- 背景颜色层。从上到下的渐变效果
- 云层。只有一种图片，对其位移、数量、染色做不同变化达到不同效果
- 信息层。包括雨雪、雷暴和晴晚流星效果
之前在 『Flutter-绘制篇』实现炫酷的雨雪特效 一文中介绍过雨雪的实现细节，今天我们聊一聊如何实现 梦幻的晴晚流星 效果，其实实现到不难，主要是实现的思路和方法。
话不多说，先看一下动态效果图(为了更好预览多样的背景动效，在右上角关于页面加了入口，可以实时切换天气类型，查看动态效果，感兴趣的下载体验)：
陪你去看流星雨落在这地球上，让你的泪落在我肩膀，在我肩膀~
仔细观察不难发现，主要有两部分组成：
- 不断闪烁的星星效果
- 转瞬即逝的流星效果
所以接下来会围绕上面两部分进行详细讲解。
晴晚
Flutter 同 Android 的绘制有很多相似之处，提供了 canvas 和 paint 类作为画板和画笔，可以绘制基础的图形文字和图片，同样有很多 api 为简单的图形添加渐变、高斯模糊等炫酷的特效 。
初始化素材和参数
晴晚由群星组成，首先绘制一颗星星，简单实现，就不使用图片，直接通过 canvas 绘制。Flutter 提供了 MaskFilter.blur(_style, _sigma)，并通过 _paint.maskFilter 可以图形设置模糊，从而营造星星的发光效果。
BlurStyle 一共有四种类别，分别为：normal、solid、outer和outter，对应下面的效果：
_sigma 模糊系数越大越模糊，在 normal 下分别设置 0、1、3、7 效果：
有了星星，接下来就需要创建星星，并赋予其属性，让其展示在屏幕上。
class _StarParam {
double x;
double y;
double alpha = 0.0;
double scale;
_StarParam();
void init() {
alpha = Random().nextDouble();
scale = Random().nextDouble() * 0.1 + 0.6;
x = Random().nextDouble() * 1.wp / scale;
y = Random().nextDouble() * 0.3.hp / scale;
}
}
除了坐标 x,y 属性外，alpha 用于后面做动画， scale 用于模拟远近的效果，我们创建 100 个随机分布在 1*width 和 0.3*height 的区域内。
绘制
有参数后，直接开始绘制，只需要调用 canvas.drawCircle() 即可：
void drawStar(_StarParam param, Canvas canvas) {
if (param == null) {
return;
}
canvas.save();
var identity = ColorFilter.matrix([
1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0, param.alpha, 0,
]);
_paint.colorFilter = identity;
canvas.scale(param.scale);
canvas.drawCircle(Offset(param.x, param.y), 3, _paint);
canvas.restore();
}
实现效果如下：
动画
接下来就是让星星“动”起来。有点类似之前实现雨雪的逻辑，创建一个持续运行的动画，在动画回调中不断的 setState()，对于星星对象，用一个属性 alpha 字段，不断自增或自减来达到闪烁的效果。
void move() {
if (reverse == true) {
alpha -= 0.01;
if (alpha < 0) {
reset();
}
} else {
alpha += 0.01;
if (alpha > 1.2) {
reverse = true;
}
}
}
这里，当 alpha 值达到阈值时，将 reverse 字段置为 true，此时开始自减，做消失动画，因为很多属性都是随机，最终就营造出群星闪烁的效果。
流星
初始化素材和参数
一开始准备从各种图片素材网上试着找一下流星的资源，结果要么效果不满意，要么就是要各种收费和关注等等。转念一想，还不如自己实现来的快，无非就是一条渐变细长形的圆角矩形。
圆角矩形通过 canvas.drawRRect() 可以实现，为了实现流星的拖尾效果，借用 paint#shader 的属性，达到渐变的效果。
var gradient = ui.Gradient.linear(
const Offset(0, 0),
Offset(_meteorWidth, 0),
[const Color(0xFFFFFFFF), const Color(0x00FFFFFF)],
);
_meteorPaint.shader = gradient;
我们随机创建4组流星。
绘制
为了营造更真实的流星划过效果，水平效果是不满足的，需要对其进行角度翻转。
一开始，打算通过 y/x=tan(Θ) 方式进行绘制，后来考虑到要做动画，各种动态计算，干脆直接使用 canvas.rotate() 和 canvas.translate() 的方法，更加方便，更加的好理解。
void drawMeteor(_MeteorParam param, Canvas canvas) {
canvas.save();
var gradient = ui.Gradient.linear(
const Offset(0, 0),
Offset(_meteorWidth, 0),
[const Color(0xFFFFFFFF), const Color(0x00FFFFFF)],
);
_meteorPaint.shader = gradient;
canvas.rotate(pi * param.radians);
canvas.translate(param.translateX, tan(pi * 0.1) *_meteorWidth + param.translateY);
canvas.drawRRect(
RRect.fromLTRBAndCorners(0, 0, _meteorWidth, _meteorHeight,
topLeft: _radius,
topRight: _radius,
bottomRight: _radius,
bottomLeft: _radius),
_meteorPaint);
canvas.restore();
}
这里 rotate 和 translate 的顺序不能写反，需要先旋转再平移，因为旋转的点在左侧端，如果先平移再旋转，会导致运动过程中，流星不再一条直线上运行。效果如下：
动画
复用晴晚的 AnimationController,通过不断的改变 translateX 值，来完成划过的动画效果。
class _MeteorParam {
double translateX;
double translateY;
double radians;
void reset() {
translateX = 1.0.wp + Random().nextDouble() * 20.0.wp;
radians = -Random().nextDouble() * 0.07 - 0.05;
translateY = Random().nextDouble() * 0.5.hp;
}
void move() {
translateX -= 20;
if (translateX <= -1.0.wp) {
reset();
}
}
}
这里初始化 1.0.wp + Random().nextDouble() * 20.0.wp，使其初始化位置分布在 [1, 20] * width 的位置，而在的动画过程中不断 translateX -= 20，当滑过一个屏幕则重新初始化位置。
到这，梦幻的晴晚和流星效果就实现了，预告一下下期-炫酷的雷暴效果。