Flutter 133: 图解自定义 ACEWaterButton 水波纹按钮

    小菜想自定义一个水波纹按钮,即默认向外扩散的水波样式;实现方式有很多种,小菜尝试最基本的 AnimationController 逐层绘制来处理,小菜简单记录一下尝试过程;

ACEWaterButton

    小菜画了一个简单的图如下,预期的水波纹按钮包括两层,以中心圆(蓝色)为基础逐步向外围扩散至(绿色),并循环重复;

1. 内置圆

    小菜以此分为两步,第一步先绘制内置圆和内置图标,小菜提供了 innerSizeinnerIcon 属性以方便内置圆的样式自定义;通过 ClipOval 裁切一个完整的内置圆;

    其中需要注意的是,内置圆应置于外围圆的中心,因此小菜添加一个 outSize 属性限制外围圆尺寸,同时默认设置 innerSize = 48.0,若未设置 outSize,则以 innerSize * 2 为默认值;

Container(
    width: widget.outSize ?? widget.innerSize * 2,
    height: widget.outSize ?? widget.innerSize * 2,
    child: widget.innerIcon == null
        ? Container() : Center(child: ClipOval(
                child: Container(
                    width: widget.innerSize,
                    height: widget.innerSize,
                    color: widget.color,
                    child: widget.innerIcon))))

2. 水波纹

    小菜预想实现水波纹效果则必然离不开 Animation 动画,使用动画方式也有多种,可以继承 AnimatedWidget 也可以使用 AnimationController 自定义动画样式;

    小菜预期水波纹不仅范围逐渐变大,并且在扩散过程中透明度逐渐降低,至外围最大范围为止消失;小菜采用最基本的 CustomPainter 自定义 Canvas.drawCircle,根据时间进度来逐层绘制水波纹;

2.1 透明度

    小菜使用 Paint 绘制时根据 AnimationController.value 进度逐步设置 color.withOpacity 透明度逐渐变低;

Paint _paint = Paint()..style = PaintingStyle.fill;
_paint..color = color.withOpacity(1.0 - progress);

2.2 外围圆

    外围圆主要是根据 AnimationController.value 进度逐步进行半径的更新;小菜预期的水波纹范围只有默认的内置圆到外围圆的范围渐变,因此变动范围为 (outSize - innerSize) * 0.5 * progress,同时起始位置为内置圆,因此初始半径应再加上内置圆半径;

double _radius = ((outSize ?? innerSize * 2) * 0.5 - innerSize * 0.5) * progress + innerSize * 0.5;
canvas.drawCircle(Offset(size.width * 0.5, size.height * 0.5), _radius, _paint);

    小菜在测试过程中也尝试了其他的扩展范围,若起始位置为中心则无需添加内置圆半径;若想增大或见效水波纹范围可以自由调整 AnimationController.value 进度范围;

// 中心点扩展
double _radius = innerSize * 0.5 * progress;
// 增大扩展范围
double _radius = innerSize * 2 * progress;
class ACEWaterPainter extends CustomPainter {
  final double progress;
  final Color color;
  final double innerSize;
  final double outSize;

  Paint _paint = Paint()..style = PaintingStyle.fill;

  ACEWaterPainter(this.progress, this.color, this.innerSize, this.outSize);

  @override
  void paint(Canvas canvas, Size size) {
    _paint..color = color.withOpacity(1.0 - progress);

    double _radius =
        ((outSize ?? innerSize * 2) * 0.5 - innerSize * 0.5) * progress + innerSize * 0.5;

    canvas.drawCircle(Offset(size.width * 0.5, size.height * 0.5), _radius, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

3. 小反思

3.1 内置圆是否可缺省?

    小菜在通过 ACEWaterPainter 绘制水波纹过程中,起始位置从内置圆开始,那是否可以省略第一步的内置圆呢?

    暂时先不缺省,因为小菜在设置水波纹扩散过程中,同时设置了透明度的渐变,若缺省内置圆会影响 innerIcon 的展示效果;但内置圆绘制位置可以调整,也可以在 ACEWaterPainter 中进行绘制;

3.2 shouldRepaint 是否需要一直重绘?

    ACEWaterPainter 中是否需要一直重绘;在使用自定义 Paint 委托类创建新的 CustomPaint 对象时若新实例与旧实例不同,则应返回 true,否则应返回 false;因此在水波纹过程中,小菜默认设置为 true 进行重绘;


    ACEWaterButton 案例源码


    小菜对 ACEWaterButton 水波纹按钮的简单效果已满足,但还不够完善,对于重绘的机制还需要优化;如有错误,请多多指导!

来源: 阿策小和尚

你可能感兴趣的:(Flutter 133: 图解自定义 ACEWaterButton 水波纹按钮)