开启成长之旅！这是我参加「日新计划 12 月更文应战」的第5天，点击查看活动详情

题记: 童话说雨后会有一道彩虹,却不曾说过它也会转瞬成空.想要把绚烂紧紧握在手中…
—虹之间

闲暇时,又听到了这首歌. 抑郁质性情的人难免会惆怅,夸姣的东西转瞬即逝.不过谁叫咱们是程序员呢~ 这就安排上.整上一个想看就看的彩虹!

Flutter 玩转彩虹, 吃定彩虹

玩转彩虹

彩虹，是气象中的一种光学现象，当太阳光照射到半空中的水滴，光线被折射及反射，在天空上构成拱形的七彩光谱，由外圈至内圈呈红、橙、黄、绿、蓝、靛蓝、蓝紫七种色彩. 相信小同伴们在大雨过后的不经意间都见过吧! 接下来,咱们就自己手动制作一下.一般这种, 咱们都会剖析一下制作的过程.

剖析过程

彩虹实际上便是7道拱桥型状的色彩堆积,制作彩虹第一步咱们不如先制作一道拱桥形状的色彩块.也便是说, 本质上咱们制作一个半圆环即可解决问题.

制作半圆环

在Flutter中, 半圆环都制作有许多办法. 比如canvas中,有drawOval(rect,paint) 的办法,这种办法能够制作出一整个圆环, 咱们能够对它作切割即可. 不过这种办法不便利的是它操控不了圆环的进度, 有没有一种办法能够让咱们自己去操控圆环制作的进度呢? 答案便是Path, 很多同伴们应该都对Path 有过或多或少都了解, 它不仅能够画直线、三角形、圆锥,更能够画优美的贝塞尔曲线. 这儿咱们调用它的acrTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) 办法, 它的参数:

  • rect: 给定一个矩形规模,在矩形规模中制作弧形. 也便是咱们假如是正方形的话,实际上制作的便是一个圆形,假如是长方形的话终究产物便是椭圆形.
    Flutter 玩转彩虹, 吃定彩虹
  • startAngle: 开始的角度
  • sweepAngle: 扫过的角度 实际上这儿的坐标系和笛卡尔坐标系是相同的, 所以是从x轴开始算的, 也便是顺时针方向分别是0 -> pi/2 -> pi -> 3/2pi-> 2pi. 咱们假定startAngle是0的话, sweepAngle为1/3pi, 那么终究的圆弧如图左示.
    Flutter 玩转彩虹, 吃定彩虹
  • forceMoveTo: false的时分,增加一个线段开始于当前点，结束于弧的起点.true时为原点.

理论知识了解结束以后,咱们经过如下代码进行制作试一下:

{
    Path path = Path();
    path.moveTo(-width, 0.0);
    path.arcTo(
      Rect.fromCenter(center: Offset.zero, width: width, height: width),
      -pi,
      pi,
      true,
    );
}

结果如图:

Flutter 玩转彩虹, 吃定彩虹
第一道圆弧现已出来了, 阐明理论上这样做可行.

多道圆弧

一道圆弧既然能够了, 咱们首先记录下彩虹的色彩

  final List<Color> colors = const [
    Color(0xFF8B00FF),
    Color(0xFF0000FF),
    Color(0xFF00FFFF),
    Color(0xFF00FF00),
    Color(0xFFFFFF00),
    Color(0xFFFF7F00),
    Color(0xFFFF0000),
  ];

记录好色彩后, 咱们首先回忆一下. 刚刚一道圆弧是怎样制作的呢? 经过path的arcTo()办法,开始在负x轴, 终止于x轴.也便是说咱们重复的制作上七道, 只需要半径不相同即可制作出相互连接的色彩体.

    for (var color in colors) {
      _paint.color = color;
      // 制作圆弧
      drawArc();
      canvas.drawPath(path, _paint);
      // width 为每到圆弧的半径
      width += widthStep;
    }

嗯~ 没错, 结果确实和预料的相同

Flutter 玩转彩虹, 吃定彩虹
但是,总觉得有些不完美. 彩虹似乎都是有光晕的吧~

增加光晕

好, 光晕说来这不就来了.实际上咱们能够经过画笔制作周围部分作模糊当作光晕的构成, 恰恰Paint的mastFilter 也提供了这个办法.

{
    _paint.maskFilter = const MaskFilter.blur(BlurStyle.solid, 6);
}

咱们先简要剖析一下MaskFilter.blur() 提供了参数有哪些用途吧~实际上也便是style和sigma.style操控终究制作出来的作用.sigma操控作用的大小.这儿咱们运用BlurStyle.solid就能够制作出光晕的作用

Flutter 玩转彩虹, 吃定彩虹

光晕也有了, 但是我感觉不行特性. 我期望它能够像扇子相同打开收起. 咱们来看看怎样完成.

动画

实际上操控它的打开收起也便是在path中sweepAngle.咱们最小扫过是0弧度,最大是pi. 咱们操控了弧度变化也就操控了彩虹的展示大小.直接安排上repeat()动画

{
    AnimationController _controller = AnimationController(
      vsync: this,
      // 这儿需要把最大值改成pi, 这样才会彻底打开
      upperBound: pi,
      duration: const Duration(seconds: 2),
    );
    _controller.repeat(reverse: true);
}

结果如图:

Flutter 玩转彩虹, 吃定彩虹

源码:

github.com/weniner/flu…

结语

这儿是WeninerIo,酷爱生活且酷爱游戏. 假如你对这次的共享感兴趣, 无妨评论区留言 + 关注.期待下一次更好的相遇.