Flutter | 如何实现一个水波纹扩散效果的 Widget

先来看图:

我们在日常使用 APP 当中,肯定会遇到这种效果,那么这种效果是如何实现的呢?

确认需求

首先还是老套路,先确定一下需求,捋一下思路,然后才好写代码:

1.首先要有一个圆
2.这个圆会边扩散边消失
3.当这个圆扩散到一定程度的时候再绘制一个圆
4.有限循环 / 无限循环
5.可以有 / 无 Child

捋好了思路,下面我们来开始实现。

首先要有一个圆

首先有一个圆,这个圆应该怎么画?我想到了两种方案:

1.CustomPaint
2.ClipOver

这两种方式都很简单,所以我选择了后者,因为后者更简单(23333)。

代码我就不贴了,不过代码我已经提交到了 https://github.com/wanglu1209/WFlutterDemo,可以随时查看。

这个圆会边扩散边消失

一边扩散,一边消失。

有没有想起来我上一篇文章说起的箭头小Demo?--- Flutter | 通过一个小例子带你认识动画 Animation

没错,这里也是使用这种 evaluate 来计算大小和透明度。

代码如下:

Container(
  width: _radiusTween.evaluate(animation),
  height: _radiusTween.evaluate(animation),
  child: ClipOval(
    child: Opacity(
      opacity: _opacityTween.evaluate(animation),
      child: Container(
        color: color,
      ),
    ),
  ),
)

这样,我们只需要设置好该 Tween 的 begin 和 end 就能实现一边扩散,一边消失了。

当这个圆扩散到一定程度的时候再绘制一个圆

首先,我们都知道,在 Flutter 当中,如何把一个 widget 浮在另一个 widget 上。没错,用 Stack

那就要创建一个 List<Widget> 来存放我们的刚才定义好的「会扩散消失的圆」。

而且我们也知道,这个「会扩散消失的圆」需要一个 Animation,那也就是说每一个圆都需要一个AnimationAnimationController,那我们也需要创建一个 List<AnimationController> 来控制每一个「会扩散消失的圆」。

并且,在 AnimationStatus == completed 的时候,把该 圆移除,并且把该 controller dispose。

而且在该 Widget dispose 的时候,也应该把所有未清除的 controller 给清除掉。

大致代码如下:

int i = 0;
while (widget.cycles == null ? true : i < widget.cycles) {
  if (mounted) {
    setState(() {
      AnimationController _animationController;
      Animation<double> _animation;

      _animationController =
        AnimationController(vsync: this, duration: widget.duration);
      _animation = CurvedAnimation(
        parent: _animationController, curve: Curves.linear);

      _animationController.addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          children.removeAt(0);
          controllers.removeAt(0);
          _animationController.dispose();
        }
      });
      controllers.add(_animationController);
      _animationController.forward();

      widget.child != null
        ? children.insert(
        children.length - 1,
        AnimatedSpread(
          animation: _animation,
          radius: widget.radius,
          maxRadius: widget.maxRadius,
          color: widget.spreadColor,
        ))
        : children.add(AnimatedSpread(
          animation: _animation,
          radius: widget.radius,
          maxRadius: widget.maxRadius,
          color: widget.spreadColor,
        ));
    });
  }
  if (widget.cycles != null) i++;
  await Future.delayed(
    Duration(milliseconds: widget.duration.inMilliseconds ~/ 3));
}

每一个 animation 是有 duration 的,那么我们就可以根据该持续时间来设置什么时候出现第二个圆,我这里写的是持续时间的 1/3。

这样看起来效果是不错的。

有限循环 / 无限循环

在刚才的代码里面其实就有这一部分的逻辑:

while (widget.cycles == null ? true : i < widget.cycles) {
  // ...
}

这里主要就是控制显示几次,毕竟有的需求不是一直显示波纹效果。

可以有 / 无 Child

我这里写的 child 默认形状是圆形的,大小被 SizedBox 控制为 radius 的大小:

ClipOval(
  child: SizedBox(
    width: widget.radius,
    height: widget.radius,
    child: widget.child,
  ),
),

如果有 child 的话如何保证 child 永远都是在最上面?

只需要在插入圆形的时候使用 List.insert(index, element) 方法就ok了。

这样一个有水波纹扩散效果的 Widget 就封装完成了。

总结

这里我使用了和上篇文章一样的逻辑,都是使用的 AnimatedWidget

然后用 Stack 来包装,Future.delayed 来控制下一个圆形出现的时间。

Flutter 上的内存泄漏监控

Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏。在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 debug 环境下检测当前页面是否泄漏。本文将会带你实现一个 Flutter 可用的 LeakCanary,并讲述怎么用该工具检测出了 1.9.1 Framework 上的两个泄漏。

发布于:4天以前  |  17次阅读  |  详细内容 »

网易支付-高性能NEJFlutter小程序动态化架构实践

大家好,今天跟大家分享的主题是《NEJFlutter小程序动态化高性能架构》,这是关于网易支付团队在Flutter小程序动态化方向上尝试的一套技术解决方案,一句话介绍NEJFlutter,就是用JavaScript开发业务逻辑、Flutter开发UI布局的小程序架构,性能堪比原生Flutter应用;

发布于:16天以前  |  81次阅读  |  详细内容 »

Flutter卡顿问题的监控与思考

使用Flutter技术构建的应用,一直以高性能高流畅度著称。但是随着应用复杂度越来越高,Flutter会出现一些页面流畅度明显低于Native的情况,甚至可能发生一些卡顿。而很多时候卡顿都发生在线上,即使获得了用户的操作路径,也难以重现。如果我们有一套卡顿监控系统,能够帮助我们捕获到卡顿时的堆栈,那么在发生卡顿的时候,我们就可以定位到具体是哪个函数引起的卡顿,从而解决这些问题。

发布于:16天以前  |  75次阅读  |  详细内容 »

​Flutter | 1.9 全新组件 ToggleButtons

前几天的 GDD 相信大家还记忆犹新,Flutter 官宣发布了 1.9 正式版。 随之而来的有一些全新的组件和对于 web 的支持等等。 那我们今天就来看一下这其中的一个组件 --「ToggleButtons」。

发布于:23天以前  |  90次阅读  |  详细内容 »

最多阅读

在Flutter中添加资源和图片 1年以前  |  2310次阅读
Flutter的手势GestureDetector分析详解 1年以前  |  1812次阅读
发布Flutter开发的iOS程序 1年以前  |  1636次阅读
Flutter插件详解及其发布插件 11月以前  |  1609次阅读
Flutter Widget框架概述 1年以前  |  1388次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1363次阅读
使用Inspector检查用户界面 1年以前  |  1325次阅读
JSON和序列化 1年以前  |  1245次阅读
Flutter框架概览 1年以前  |  1198次阅读
Flutter 状态管理指南之 Provider 1年以前  |  1187次阅读
为Flutter应用程序添加交互 1年以前  |  1159次阅读
使用自定义字体 1年以前  |  1148次阅读
Flutter for Web详细介绍 1年以前  |  1088次阅读
处理文本输入 1年以前  |  1047次阅读
Flutter路由详解 1年以前  |  1040次阅读
发布Flutter开发的Android程序 1年以前  |  979次阅读
使用包来开发Flutter应用 1年以前  |  978次阅读
编写国际化Flutter App 1年以前  |  960次阅读