Flutter 微信语音消息播放动画

Flutter 微信语音消息播放动画

项目中有即时通讯的模块，里面涉及到播放语音消息。

先上个效果图片吧

主要内容

通过继承CustomPainter来绘制圆弧，通过控制圆弧的半径来动态绘制，形成一个连续的动画效果。

 ///核心的绘制方法，首先需要判断是左边消息还有右边消息
 ///后面就是根据showIndex参数来决定绘制几个弧线了
 @override
  void paint(Canvas canvas, Size size) {
    var radius = size.width / 2;
    var sweepAngle = math.pi / 2;

    if (left) {
      startAngle = math.pi * 7 / 4;
      center = Offset(0, size.height / 2);
    } else {
      center = Offset(size.width, size.height / 2);
      startAngle = math.pi * 3 / 4;
    }
//    print("showIndex $showIndex");
    if (showIndex! >= 3) {
      canvas.drawArc(Rect.fromCircle(center: center, radius: radius),
          startAngle, sweepAngle, false, mPaint);
    }
    if (showIndex! >= 2) {
      canvas.drawArc(Rect.fromCircle(center: center, radius: radius * 2 / 3),
          startAngle, sweepAngle, false, mPaint);
    }
    if (showIndex! >= 1) {
      canvas.drawArc(Rect.fromCircle(center: center, radius: radius / 3),
          startAngle, sweepAngle, true, mPaint..style = PaintingStyle.fill);

      ///重置属性
      mPaint.style = PaintingStyle.stroke;
    }
  }

外层通过动画来控制绘制流程

  ///动画控制器来定义动画播放时间
  @override
  void initState() {
    showIndex = showAll;
    _controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1500));
     ///类似于Android的动画差值器的功能，数值变化1，2，3
    intTween = IntTween(begin: 1, end: showAll);
     ///关联动画控制器
    intTween.animate(_controller);
    _controller.addListener(() {
      setState(() {});
      showIndex = intTween.lerp(_controller.value);
    });

    super.initState();
  }

代码比较简单，对于初次使用flutter的小伙伴，如果你刚好需要一个效果，可以节省一些时间。

官方的动画地址：

教程 | 在 Flutter 应用里实现动画效果 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

代码地址：传送地址