【Flutter 专题】84 图解自定义 ACEWave 波浪 Widget (二)

return Transform.translate(    offset: Offset(waveWidth * _curvedAnimation.value, 0.0),    child: Container(); // 波浪

Path _wavePath(path, size, plusWidth) {  for (int i = 0; i < _count; i++) {    path.moveTo(waveWidth * i - size.width - startOffset, startOffsetY);    path.quadraticBezierTo(        _quaterWidth + waveWidth * i - size.width - startOffset, startOffsetY - waveHeight,        _quaterWidth * 2 + waveWidth * i - size.width - startOffset, startOffsetY);    path.moveTo(_quaterWidth * 2 + waveWidth * i - size.width - startOffset, startOffsetY);    path.quadraticBezierTo(        _quaterWidth * 3 + waveWidth * i - size.width - startOffset, startOffsetY + waveHeight,        _quaterWidth * 4 + waveWidth * i - size.width - startOffset, startOffsetY);    path.moveTo(_quaterWidth * 4 + waveWidth * i - size.width - startOffset, startOffsetY);  }  path.lineTo(_quaterWidth * 4 + waveWidth * (_count - 1) - size.width - startOffset, 600.0);  path.lineTo(-size.width - startOffset, 600.0);  path.lineTo(-size.width - startOffset, startOffsetY);
  for (int i = 0; i < _count; i++) {    path.moveTo(waveWidth * i - startOffset + plusWidth, startOffsetY);    path.quadraticBezierTo(        _quaterWidth + waveWidth * i - startOffset + plusWidth, startOffsetY - waveHeight,        _quaterWidth * 2 + waveWidth * i - startOffset + plusWidth, startOffsetY);    path.moveTo(_quaterWidth * 2 + waveWidth * i - startOffset + plusWidth, startOffsetY);    path.quadraticBezierTo(        _quaterWidth * 3 + waveWidth * i - startOffset + plusWidth, startOffsetY + waveHeight,        _quaterWidth * 4 + waveWidth * i - startOffset + plusWidth, startOffsetY);    path.moveTo(_quaterWidth * 4 + waveWidth * i - startOffset + plusWidth, startOffsetY);  }  path.lineTo(_quaterWidth * 4 + waveWidth * (_count - 1) - startOffset + plusWidth, 600.0);  path.lineTo(-startOffset + plusWidth, 600.0);  path.lineTo(-startOffset + plusWidth, startOffsetY);
  for (int i = 0; i < _count; i++) {    path.moveTo(waveWidth * i + size.width - startOffset + plusWidth * 2, startOffsetY);    path.quadraticBezierTo(        _quaterWidth + waveWidth * i + size.width - startOffset + plusWidth * 2, startOffsetY - waveHeight,        _quaterWidth * 2 + waveWidth * i + size.width - startOffset + plusWidth * 2, startOffsetY);    path.moveTo(        _quaterWidth * 2 + waveWidth * i + size.width - startOffset + plusWidth * 2, startOffsetY);    path.quadraticBezierTo(        _quaterWidth * 3 + waveWidth * i + size.width - startOffset + plusWidth * 2,        startOffsetY + waveHeight, _quaterWidth * 4 + waveWidth * i + size.width - startOffset + plusWidth * 2, startOffsetY);    path.moveTo(_quaterWidth * 4 + waveWidth * i + size.width - startOffset + plusWidth * 2, startOffsetY);  }  path.lineTo(      _quaterWidth * 4 + waveWidth * (_count - 1) + size.width - startOffset + plusWidth * 2, 600.0);  path.lineTo(size.width - startOffset + plusWidth * 2, 600.0);  path.lineTo(size.width - startOffset + plusWidth * 2, startOffsetY);  return path;}

Paint paint = Paint()    ..color = Colors.blue ..strokeCap = StrokeCap.round ..strokeWidth = 6    ..style = PaintingStyle.fill;var rect = Offset(0.0, startOffsetY) & Size(size.width, size.height)paint.shader = LinearGradient(    begin: Alignment.bottomCenter,    end: Alignment.topCenter,    colors: [Colors.blue.withOpacity(0.4), Colors.white.withOpacity(0.4) ]).createShader(rect);

canvas.save();
canvas.clipPath(_clipPath(size, _plusWidth));canvas.drawPath(_wavePath(size, _plusWidth), paint);
canvas.restore();

// 波浪整体高度(裁剪后)final double allHeight;// 一个周期波浪宽度 Listfinal List<double> waveWidthList;// 波峰到中心点高度 Listfinal List<double> waveHeightList;// 水平偏移量 Listfinal List<double> startOffsetXList;// 波峰距顶点偏移量 Listfinal List<double> startOffsetYList;// 时间 Listfinal List<Duration> durationList;// 渐变色 Listfinal List<List<Color>> waveColorList;
ACEWave(this.waveWidthList, this.waveHeightList, this.allHeight,    {this.durationList,    this.startOffsetXList,    this.startOffsetYList,    this.waveColorList});

List<double> waveWidth = [600, 800, 300];List<double> waveHeight = [60, 80, 70];List<double> startOffsetX = [30, 150, 100];List<double> startOffsetY = [100, 120, 100];List<Duration> duration = [  Duration(milliseconds: 6000),  Duration(milliseconds: 4000),  Duration(milliseconds: 5000)];List<List<Color>> colorList = [  [Colors.green.withOpacity(0.2), Colors.white.withOpacity(0.4)],  [Colors.blue.withOpacity(0.2), Colors.white.withOpacity(0.4)],  [Colors.blue.withOpacity(0.2), Colors.white.withOpacity(0.4)]];return Scaffold(    appBar: AppBar(title: Text('ACEWave Page')),    body: Container(        color: Colors.grey,        height: (MediaQuery.of(context).size.height),        child: Container(            child: ACEWave(          waveWidth,          waveHeight,          300.0,          startOffsetXList: startOffsetX,          startOffsetYList: startOffsetY,          durationList: duration,          waveColorList: colorList,        ))));