最近在做一个天气模块的时候,风力需要显示一个旋转的风车,实现效果如下:
需求分析
我们可以把上面的效果拆分为两个部分实现:
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
启动动画。
关于动画的状态等其他相关点,可以看:
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