『Flutter-绘制篇』实现梦幻的晴晚流星效果

字数统计: 1,619 字   |   阅读时长: 7 分   |   本文总阅读量: 次


Flutter

前言

前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径、语音播报以及生活指数等服务，支持定位、删除、搜索等操作。

下图为主页效果，点击下载 进行体验：

图1

项目中运用了大量的自定义绘制 widget，首页丰富的 自定义 chart 效果和炫酷的天气背景动效。天气背景动效在不同的天气气象下展示不同的效果。目前一共实现了 14 种类别，其中有，晴、晴晚、多云、阴天、小中大雨、小中大雪、雾、霾、浮尘以及雷暴。背景动效一共分为三层：

  • 背景颜色层。从上到下的渐变效果
  • 云层。只有一种图片，对其位移、数量、染色做不同变化达到不同效果
  • 信息层。包括雨雪、雷暴和晴晚流星效果

之前在 『Flutter-绘制篇』实现炫酷的雨雪特效 一文中介绍过雨雪的实现细节，今天我们聊一聊如何实现 梦幻的晴晚流星 效果，其实实现到不难，主要是实现的思路和方法。

话不多说，先看一下动态效果图(为了更好预览多样的背景动效，在右上角关于页面加了入口，可以实时切换天气类型，查看动态效果，感兴趣的下载体验)：

night_star

陪你去看流星雨落在这地球上，让你的泪落在我肩膀，在我肩膀~

仔细观察不难发现，主要有两部分组成：

  • 不断闪烁的星星效果
  • 转瞬即逝的流星效果

所以接下来会围绕上面两部分进行详细讲解。

晴晚

Flutter 同 Android 的绘制有很多相似之处，提供了 canvas 和 paint 类作为画板和画笔，可以绘制基础的图形文字和图片，同样有很多 api 为简单的图形添加渐变、高斯模糊等炫酷的特效 。

初始化素材和参数

晴晚由群星组成，首先绘制一颗星星，简单实现，就不使用图片，直接通过 canvas 绘制。Flutter 提供了 MaskFilter.blur(_style, _sigma)，并通过 _paint.maskFilter 可以图形设置模糊，从而营造星星的发光效果。

BlurStyle 一共有四种类别，分别为：normal、solid、outer和outter，对应下面的效果：
blur_style

_sigma 模糊系数越大越模糊，在 normal 下分别设置 0、1、3、7 效果：
sigma

有了星星，接下来就需要创建星星，并赋予其属性，让其展示在屏幕上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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() 即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
void drawStar(_StarParam param, Canvas canvas) {
  if (param == null) {
    return;
  }
  canvas.save();
  var identity = ColorFilter.matrix(<double>[
    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 字段，不断自增或自减来达到闪烁的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
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，此时开始自减，做消失动画，因为很多属性都是随机，最终就营造出群星闪烁的效果。

stars

流星

初始化素材和参数

一开始准备从各种图片素材网上试着找一下流星的资源，结果要么效果不满意，要么就是要各种收费和关注等等。转念一想，还不如自己实现来的快，无非就是一条渐变细长形的圆角矩形。

圆角矩形通过 canvas.drawRRect() 可以实现，为了实现流星的拖尾效果，借用 paint#shader 的属性，达到渐变的效果。

1
2
3
4
5
6
var gradient = ui.Gradient.linear(
  const Offset(0, 0),
  Offset(_meteorWidth, 0),
  <Color>[const Color(0xFFFFFFFF), const Color(0x00FFFFFF)],
);
_meteorPaint.shader = gradient;

我们随机创建4组流星。

绘制

为了营造更真实的流星划过效果，水平效果是不满足的，需要对其进行角度翻转。

一开始，打算通过 y/x=tan(Θ) 方式进行绘制，后来考虑到要做动画，各种动态计算，干脆直接使用 canvas.rotate() 和 canvas.translate() 的方法，更加方便，更加的好理解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
void drawMeteor(_MeteorParam param, Canvas canvas) {
  canvas.save();
  var gradient = ui.Gradient.linear(
    const Offset(0, 0),
    Offset(_meteorWidth, 0),
    <Color>[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 值，来完成划过的动画效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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，当滑过一个屏幕则重新初始化位置。

到这，梦幻的晴晚和流星效果就实现了，预告一下下期-炫酷的雷暴效果。

本文标题:『Flutter-绘制篇』实现梦幻的晴晚流星效果

文章作者:下位子

发布时间:2020-09-13, 23:11:12

最后更新:2020-09-13, 21:22:56

原始链接:http://xiaweizi.cn/article/903e/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

#rewardButton { background-color: #ea6f5a; } .btn-pay { margin-bottom: 20px; padding: 8px 25px; font-size: 16px; color: #fff; background-color: #ea6f5a; } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #QR img{ height: 200px; height: 200px; margin: 20px; }
文章目录
  1. 1. 前言
  2. 2. 晴晚
    1. 2.1. 初始化素材和参数
    2. 2.2. 绘制
    3. 2.3. 动画
  3. 3. 流星
    1. 3.1. 初始化素材和参数
    2. 3.2. 绘制
    3. 3.3. 动画
您是第 位小伙伴 | 本站总访问量 次 | 已经写了 120.4k 字啦

载入天数...载入时分秒...