最近在做一个天气模块的时候，风力需要显示一个旋转的风车，实现效果如下：

需求分析

我们可以把上面的效果拆分为两个部分实现：

1、画一个风车的FanWidget
2、旋转动画

一、风车Widget实现

风车Widget 效果如下：

这里又可以把它拆分为如下三部分实现：

• 3片扇叶
• 中间的圆点
• 圆柱

圆点和圆柱都比较好实现，最主要还是三片扇叶的实现。

扇叶的实现思路是：先在原点(0,0)画一个扇叶，然后在旋转复制两个扇叶。

至于为什么要在原点画扇叶？

因为旋转是以原点(0,0)为旋转的中心点的。

1、扇叶的实现

首先在原点x轴上画一片扇叶：

  @override
  void paint(Canvas canvas, Size size) async {
    r = width / 2;
    var fanPath = Path();

    var paint = Paint()
      ..strokeWidth = 1
      ..style = PaintingStyle.fill
      ..color = color;

    var bgPaint = Paint()..color = Colors.yellow;
    canvas.drawRect(Rect.fromLTRB(0, 0, width, height), bgPaint);
    
    ///扇叶的宽度
    double fanWidth = height / 3;

    ///留2个宽度放圆点
    fanPath.moveTo(2, 0);
    fanPath.quadraticBezierTo(fanWidth / 4, -4, fanWidth / 2, -2);
    fanPath.lineTo(fanWidth, 0);
    fanPath.lineTo(fanWidth / 2, 2);
    fanPath.quadraticBezierTo(fanWidth / 4, 4, 2, 0);
    fanPath.close();
    canvas.drawPath(fanPath, paint);
  }

效果如下：

黄色的背景是这个自定义widget的宽高背景。

然后在旋转复制第二个和第三个扇叶：

 	///1角度 =  radians弧度
  	double radians = pi / 180;
  
    ///第二个扇叶
    canvas.save();
    canvas.rotate(radians * 120);
    canvas.drawPath(fanPath, paint);
    canvas.restore();

    ///第三个扇叶
    canvas.save();
    canvas.rotate(radians * 240);
    canvas.drawPath(fanPath, paint);
    canvas.restore();

由于canvas旋转的是弧度，而360角度等于2π弧度，所以可以得到每1角度的弧度值radians

 	///1角度 =  radians弧度
  	double radians = pi / 180;

pi是math方法中π的值。

每次旋转之前需要先调用canvas.save();保存之前的操作，

旋转完成后，调用canvas.restore();来合并旋转的路径。

旋转后效果如下：

这个时候我们只需要对Canvas进行平移操作，就可以了。

	///半径
  	double r;
 	r = width / 2;
 	
    ///初始时旋转的原点在(0,0)，平移原点到圆心
    canvas.translate(r, fanWidth);

效果如下：

需要注意的是：平移是在画扇叶之前进行的。

画圆点：

    ///中间圆点
    canvas.drawCircle(Offset(r, fanWidth), 2, paint);

画圆柱：

    ///圆柱
    var pillarPath = Path();
    pillarPath.moveTo(r + 1, fanWidth + 3);
    pillarPath.lineTo(r + 4, height - 2);
    pillarPath.quadraticBezierTo(r, height, r - 4, height - 2);
    pillarPath.lineTo(r - 1, fanWidth + 3);
    pillarPath.lineTo(r + 1, fanWidth + 3);
    pillarPath.close();
    canvas.drawPath(pillarPath, paint);

画圆点和圆柱是在canvas平移之前进行的。

效果图如下：

二、旋转动画

因为是一个单独的Widget，所以在使用动画的时候我们也不需要考虑性能之类的东西了。直接使用setState来刷新就行了。

在动画结束的时候，再次启动动画就行了。

class _PageState extends State<FanWidget> with SingleTickerProviderStateMixin {
  ///当前动画的进度0~360
  double progress = 0;
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 6))
          ..addListener(() {
            setState(() {
              progress = _animationController.value * 360;
            });
          })
          ..addStatusListener((AnimationStatus status) {
          	///动画结束后启动动画
            if (status == AnimationStatus.completed) {
              _animationController.reset();
              _animationController.forward();
            }
          });

    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _FanWidget(
        width: widget.width,
        height: widget.height,
        progress: progress,
        color: widget.color,
      ),
    );
  }

  @override
  void dispose() {
    _animationController?.dispose();
    super.dispose();
  }
}

///风车widget
class FanWidget extends StatefulWidget {
  final double width;
  final double height;
  final Color color;

  FanWidget({this.width, this.height, this.color = Colors.white});

  @override
  State<StatefulWidget> createState() {
    return _PageState();
  }
}

在_PageState中，直接使用AnimationController启动一个值为0-1的动画，时间为6秒。并在addStatusListener中监听动画执行的状态，当动画执行完毕后，直接调用forward再次执行动画是没有效果的，要先调用reset将当前状态重置,然后在执行forward启动动画。

关于动画的状态等其他相关点，可以看：

Flutter补间动画

progress的赋值如下：

 progress = _animationController.value * 360;

由于_animationController.value的值为0~1，所以progress的值为0~360，可以用来表示第一个扇叶旋转的角度。

因为另外两个扇叶都是基于第一个扇叶分别进行120°旋转和240°旋转得到的。所以我们只需要旋转第一个扇叶就行了。

即在FanWidget中，我们还需要添加一个旋转的操作：

    ///旋转
    canvas.rotate(radians * progress);

旋转的操作放在平移之后，画扇叶之前进行。

这样我们通过addListener监听动画执行进度，然后赋值progress，调用setState刷新进度，从而实现旋转的动画。

总结

• 旋转时需要注意旋转的中心点是在原点处(0,0)
• 旋转的角度是弧度
• restore之前，要进行save操作

完整代码：
https://github.com/Zhengyi66/FlutterDemo/blob/master/lib/widget/fan_widget.dart