Flutter 自定义Widget——风车实现
最近在做一个天气模块的时候,风力需要显示一个旋转的风车,实现效果如下:
需求分析
我们可以把上面的效果拆分为两个部分实现:
1、画一个风车的FanWidget
2、旋转动画
一、风车Widget实现
风车Widget 效果如下:
这里又可以把它拆分为如下三部分实现:
- 3片扇叶
- 中间的圆点
- 圆柱
圆点和圆柱都比较好实现,最主要还是三片扇叶的实现。
扇叶的实现思路是:先在原点(0,0)画一个扇叶,然后在旋转复制两个扇叶。
至于为什么要在原点画扇叶?
因为旋转是以原点(0,0)为旋转的中心点的。
1、扇叶的实现
首先在原点x轴上画一片扇叶:
@overridevoid 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~360double progress = 0;AnimationController _animationController;@overridevoid 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();}@overrideWidget build(BuildContext context) {return Container(child: _FanWidget(width: widget.width,height: widget.height,progress: progress,color: widget.color,),);}@overridevoid 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});@overrideState<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
Flutter 自定义Widget——风车实现相关推荐
- Flutter自定义Widget实例 -如何创建炫酷粒子时钟效果!
周末发表了一篇文章<这个项目也太屌了吧>,给大家推荐了一个炫酷的Flutter粒子时钟项目,不过没有将具体实现思路和代码,所幸,作者自己写了一篇博客将这个项目的背景.实现思路.和所遇到的问 ...
- Flutter自定义Widget之炫酷粒子时钟效果
周末发表了一篇文章<这个项目也太屌了吧>,给大家推荐了一个炫酷的Flutter粒子时钟项目,不过没有将具体实现思路和代码,所幸,作者自己写了一篇博客将这个项目的背景.实现思路.和所遇到的问 ...
- Flutter 自定义Widget 圆角矩形加三角指示器
一般app设计中都会有气泡提示,这个时候就需要用到切图了,在flutter中不管你信不信 反正对于.9的这块还是很不友好的,使用起来特别麻烦.要是安卓中这或许会很简单. 但即使支持.9 如果气泡样式很 ...
- Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...
- 【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
文章目录 一.Flutter 自定义字体 1.ttf 字体文件 2.ttf 字体资源配置 3.获取字体 4.全局使用字体 5.局部使用字体 二.完整代码示例 三.相关资源 一.Flutter 自定义字 ...
- flutter 自定义 AppBar
为什么80%的码农都做不了架构师?>>> 自带AppBar 有限制 到app_bar.dart 中将 AppBar 和 _AppBarState 类复制到自定义的wAppBa ...
- Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...
- Flutter学习 Widget简介
目录 1. Widget 概述 1.1 Widget概念 1.2 Widget 分类 2. Widget 接口 3. StatelessWidget 和 StatefulWidget 3.1 Flut ...
- flutter 自定义日历
在项目中需要实现一个日历展示我发布过的动态,效果如图,同时需要左右滑动翻页 尝试使用组件发现可自定义的范围比较小,且无法实现需求,看到这篇Flutter自定义日历,实现日期底部不同颜色的日历事件_ap ...
最新文章
- 用Xamarin.Forms创建移动应用程序
- 分布式文件系统FastDFS+nginx的使用配置
- Python-EEG工具库MNE-Python详细安装与使用
- 【转载】Python 深入浅出支持向量机(SVM)算法
- 如何更好的解决问题 : The puzzle of die
- 大数据如何预测上市公司的业绩?
- python语法错误怎么办_Python中“函数外返回”语法错误的原因?
- Redhat Ha Cluster -(转)
- QuorumPeerMain数量可否和HRegionServer节点数量不一致?
- 【转】C#开发笔记之05-迭代器中的状态机(State Machine)到底是什么?
- P2P 漏洞曝光,数以百万计的物联网设备被入侵!
- Android Studio中XML注释错误问题
- 学习笔记(1):C#Winform水晶报表实例教程-设计带图片的水晶报表
- hadoop功能测试
- 【C++】算法STL库
- win10计算机安全模式怎么,Win10系统电脑进入安全模式的两种方法
- OpenFlow简单介绍
- 星环科技数据安全管理平台 Defensor重磅发布
- resultMap的用处
- 2018年信息系统项目管理师(高级)考试报名
热门文章
- 构建更好Web客户端,Taylor Hughes讲述Skit框架背后的故事
- C语言笔记-进制转换
- python爬虫去哪儿网_用python爬虫爬取去哪儿4500个热门景点,看看国庆不能去哪儿...
- Java实习面试(2018春)
- linux中文输入搜狗,Linux配置中文输入法(搜狗输入法)
- 【历史上的今天】5 月 22 日:Windows 3.0 发布;虚幻引擎诞生;《吃豆人》问世
- 数据分析常用分析方法
- facebook使用教程_您可以在Facebook上使用假名吗?
- 2019世界智能网联汽车大会10月召开
- 10以内的分解与组成怎么教_如何教宝宝熟记10以内分解?