Flutter 中的圆波动画 Canvas - 图表

Question

我正在尝试使用 Flutter 中的 Canvas 创建动画。我想做的动画是这样的：

示例：

我设法制作了一些动画，但 none 正是我所需要的。如果已经与 Canvas 合作过的人能以任何方式帮助我，我将不胜感激。

我需要使用 canvas 来实现这个结果的原因是因为我直接对负责生成图表的包进行更改。有图表包做类似的事情，但出于商业原因，我需要使用已经在使用的东西。

Answer 1

它被称为波纹动画，关键是使用 scaleTranstion

您可以将下面的代码更改为您想要的任何内容

class RipplesAnimation extends StatefulWidget {
  const RipplesAnimation({Key key, this.size = 80.0, this.color = Colors.red,
    this.onPressed, @required this.child,}) : super(key: key);
  final double size;
  final Color color;
  final Widget child;
  final VoidCallback onPressed;
  @override
  _RipplesAnimationState createState() => _RipplesAnimationState();
}

class _RipplesAnimationState extends State<RipplesAnimation> with TickerProviderStateMixin {
  AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    )..repeat();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  Widget _button() {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(widget.size),
        child: DecoratedBox(
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: <Color>[
                widget.color,
                Color.lerp(widget.color, Colors.black, .05)
              ],
            ),
          ),
          child: ScaleTransition(
              scale: Tween(begin: 0.95, end: 1.0).animate(
                CurvedAnimation(
                  parent: _controller,
                  curve: const CurveWave(),
                ),
              ),
              child: Icon(Icons.speaker_phone, size: 44,)
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Ripple Demo"),
      ),
      body: Center(
        child: CustomPaint(
          painter: CirclePainter(
            _controller,
            color: widget.color,
          ),
          child: SizedBox(
            width: widget.size * 4.125,
            height: widget.size * 4.125,
            child: _button(),
          ),
        ),
      ),
    );
  }
}

Answer 2

使用 simple_ripple_animation 包：https://pub.dev/packages/simple_ripple_animation 在您的 code.it 中有一个简单且可自定义的动画小部件。这是示例代码：

    RippleAnimation(
  repeat: true,
  color: Colors.blue,
  minRadius: 90,
  ripplesCount: 6,
  child: Container()
)

输出：Flutter output gif

Flutter 中的圆波动画 Canvas - 图表

Circular wave animation in Flutter with Canvas - Charts

flutter

flutter-layout

flutter-animation

flutter-canvas