如何实现一个简单的雨滴动画？手把手告诉你

hiYoHoo 发布于2019-08-23 14:21 / 3130人阅读

摘要：多带带来看一个雨滴动画，其实就是一个圆圈慢慢的变大同时慢慢的变浅，最后消失。如要要做一个新的，官方建议是通过组合来实现。手势识别上述基本实现了多个雨滴的展示和动画，然后我们要来实现对用户点击的响应。

本文由云+社区发表

目的

写了几个Flutter的demo，但是对Flutter的自定义view和动画都不太了解，看到一个类似效果在android的实现，就尝试用Flutter做一下。同时也是学习Flutter的自定义view和动画相关的知识。

效果

效果动图

在蓝色区域点击，会产品水波纹动画。

宛如水珠落在池塘，雨滴落在青青草地~

思路

动画很简单，虽然有多个雨滴，不过每次点击都是重复的动画，所以只用管一个雨滴动画是怎么实现的，其他的都是重复。

多带带来看一个雨滴动画，其实就是一个圆圈慢慢的变大同时慢慢的变浅，最后消失。

所以我们封装一套上述的动画逻辑，然后在用户每次点击时生成一个相应的动画即可。

实现 自定义view

首先我们要解决的是自定义view的问题，我们知道Flutter中的一起UI皆Flutter，但是不同于android中的View会直接提供一个draw方法让你做自由的绘制操作。在Flutter中，除了StatefuleWidget等申明了支持继承的类外，其他的都是不建议继承重写的。如要要做一个新的Widget，官方建议是通过组合Widget来实现。

当然对于我们这里这种需要自己做绘制操作的，就不是组合可以解决的了，这种情况下，Flutter提供了CustomPainter类，这个类提供了paint方法，可以通过重写该方法，实现对canvas的绘制。然后作为CustomPaint的参数，控制该Widget的展示样式。

这里由于主要的绘制是水纹，要实现多个重复动画，所以具体的绘制逻辑封装了起来

class RainDrop extends CustomPainter {
  RainDrop(this.rainList);

  List rainList = List(); // 雨点列表
  Paint _paint = new Paint()..style = PaintingStyle.stroke; // 配置画笔

  @override
  void paint(Canvas canvas, Size size) {
    rainList.forEach((item) {
      item.drawRainDrop(canvas, _paint); // 实际的绘制逻辑
    });
    rainList.removeWhere((item) { // 移出无效对象
      return !item.isValid();
    });
  }
  // ...
}

水纹圈的绘制

每一个水纹的动画都是一样的，所以统一封装了起来。

class RainDropDrawer {
  static const double MAX_RADIUS = 30;
  double posX;
  double posY;
  double radius = 5;

  RainDropDrawer(this.posX, this.posY); // (2)

  drawRainDrop(Canvas canvas, Paint paint) { // (1)
    double opt = (MAX_RADIUS - radius) / MAX_RADIUS; // (3)
    paint.color = Color.fromRGBO(0, 0, 0, opt);
    canvas.drawCircle(Offset(posX, posY), radius, paint); // (4)
    radius += 0.5;
  }

  bool isValid() { // (5)
    return radius < MAX_RADIUS;
  }
}

注释(1)处，上文提到的CustomPainter会把canvas传过来，在这里完成单个水纹的绘制工作。

注释(2)处，每个水纹圈需要确定的是位置，只要位置就行了，大小是随着时间均匀扩大的，给默认起始值就行。

注释(3)处，透明度是随着半径扩大而逐渐透明的，这里简单的做了线性的映射。

注释(4)处，绘制水纹圈，然后让水纹半径自增，实现每次绘制扩大的效果。

注释(5)处，给定失效的条件。超过一定半径这个水纹就消失了。

扩散动画

Flutter中提供了很多的动画实现，这里用到的是AnimationController。

其实AnimationController在这里就是提供了一个回调，每次收到vsync信号时回调做一次更新。

    _animation = new AnimationController(
      // 因为是repeat的，这里的duration其实不care
        duration: const Duration(milliseconds: 200),
        vsync: this)
      ..addListener(() {
        if (_rainList.isEmpty) { //(1)
          _animation.stop();
        }
        setState(() {});
      });

这里的动画是通过repeat启动的，所以不用太关心duration，因为只要不手动关闭实际上是会一直回调的。

vsync设置的是当前的widget，提供了一个ticker，会定时回调。然后在回调中setState让当前widget更新UI。

注释(1)处是动画停止的条件判断，当每次点击往_rainList中加一个对象，每个对象绘制会判断大小是否有效，如果无效会被从列表中移出，当列表中没有元素时就停止动画。

手势识别

上述基本实现了多个雨滴的展示和动画，然后我们要来实现对用户点击的响应。

Flutter提供了GestureDetector这个widget来做手势识别。所以我们只需要用这个widget wrap住我们的自定义view，然后实现对应的手势监听方法即可。

      GestureDetector(
        onTapUp: (TapUpDetails tapUp) {
          RenderBox getBox = context.findRenderObject();
          var localOffset = getBox.globalToLocal(tapUp.globalPosition); // (1)

          var rainDrop = RainDropDrawer(localOffset.dx, localOffset.dy);
          _rainList.add(rainDrop);
          _animation.repeat(); // (2)
        },
        child: CustomPaint(
          painter: RainDrop(_rainList),
        ),
      ),

这里我们关注用户轻点后抬起的手势，这个监听的方法会传入TapUpDetails参数，这个参数含有抬起的位置参数，但是需要注意的是，这个坐标是全屏幕的坐标，而绘制的坐标是widget内的坐标，所以我们需要将这个坐标转换为我们widget内的坐标系，Flutter提供了这样的一个工具方法，参考注释(1)处的实现即可。

完成了坐标换算，就可以构建一个“雨点”对象，添加到List里面。然后在注释(2)处启动动画，就可以看到我们文章开头的动画效果啦~

总结

Flutter的动画实现起来真的很简单，提供一个差值回调，然后不停的更新即可。不过这里暂时没有考虑性能等问题，对setState这个方法感觉还是很黑盒，不太懂Flutter具体的UI刷新原理。

后面会梳理一下这类原理知识，否则还是有点担忧复杂动画按这种写法是否会卡顿。

此文已由作者授权腾讯云+社区发布

云服务器 GPU云服务器告诉你我告诉你官网我告诉你msdn官网 msdn我告诉你官网

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100462.html

Canvas制作的下雨动画

摘要：简介在上看到一个做的下雨效果动画，感觉蛮有意思的。让浏览器要重绘时调用你指定的方法来绘制你的动画。残影的绘制可以说是雨滴下落的关键。用来绘制动画的效果确实能让人眼前一亮，让的视觉效果提升一大截。发动自己的智慧，相信能做出更多奇妙的动画。简介在codepen上看到一个Canvas做的下雨效果动画，感觉蛮有意思的。就研究了下，这里来分享下，实现技巧。效果可以见下面的链接。霓虹雨: h...

Carson 2019-08-26 11:29 评论0 收藏0
Canvas制作的下雨动画

摘要：简介在上看到一个做的下雨效果动画，感觉蛮有意思的。让浏览器要重绘时调用你指定的方法来绘制你的动画。残影的绘制可以说是雨滴下落的关键。发动自己的智慧，相信能做出更多奇妙的动画。转载出处前端开发制作的下雨动画简介在codepen上看到一个Canvas做的下雨效果动画，感觉蛮有意思的。就研究了下，这里来分享下，实现技巧。效果可以见下面的链接。霓虹雨:http://codepen.io/nate...

番茄西红柿 2019-04-23 13:38 评论0 收藏0
canvas实现漂亮的下雨效果

摘要：说明这篇文章说如何用画出漂亮的下雨效果，先看看最后实现的效果吧。说明这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。效果图showImg(https://segmentfault.com/img/bV8ITm?w=936&h=532); 解释看图来分析下，我们需要实现哪些效果。1、雨滴下落效果，移动鼠标控制下落方向 2、雨滴下落散成小水珠，小水珠的移动...

Jonathan Shieber 2019-08-22 16:24 评论0 收藏0
用 Matplotlib 库生成动画图表

摘要：相对于静态图表，人类总是容易被动画和交互式图表所吸引。可以使用轻松生成图表直方图功率谱，条形图，错误图表，散点图等。然而，也有一些方面落后于同类的库。动画使用一组固定的对象。稍后将用数据对行对象进行填充。现在用将它们转换为动画。翻译：疯狂的技术宅https://towardsdatascience.co... showImg(https://segmentfault.com/img...

call_me_R 2019-07-31 10:20 评论0 收藏0
用 Matplotlib 库生成动画图表

摘要：相对于静态图表，人类总是容易被动画和交互式图表所吸引。可以使用轻松生成图表直方图功率谱，条形图，错误图表，散点图等。然而，也有一些方面落后于同类的库。动画使用一组固定的对象。稍后将用数据对行对象进行填充。现在用将它们转换为动画。翻译：疯狂的技术宅https://towardsdatascience.co... showImg(https://segmentfault.com/img...

不知名网友 2019-06-26 18:54 评论0 收藏0