又因为sin(k*360+a)=sin(a),所以②方式可以修改为:
③ x=width/2-sin(180+a)*R
y=height/2-cos(180+a)*R
又又因为 sin(180+a)=-sin(a),cos(180+a)=-cosa 带入③方程式得:
④ x=width/2+sin(a)*R
y=height/2+cos(a)*R
由上面2点计算得,每个子布局的中心点坐标公式统一为:
x=width/2+sin(a)*R
y=height/2+cos(a)*R
以上所用三角函数公式表:
通过上面计算得出子控件的位置公式后,开始我们的代码。
实现子控件按照圆形布局及平分角度代码如下:
//所有子控件的位置数据
//count:子控件数量;
//startAngle:开始角度默认为0;
//rotateAngle:偏转角度默认为0;
List _childPointList({Size size = Size.zero}) {
List childPointList = [];
double averageAngle = 360 / count;
double radius = size.width / 2 - childWidth / 2;
for (int i = 0; i < count; i++) {
/***子布局角度/
double angle = startAngle + averageAngle * i + rotateAngle;
//子布局中心点坐标
var centerX = size.width / 2 + sin(radian(angle)) * radius;
var centerY = size.height / 2 + cos(radian(angle)) * radius;
childPointList.add(Point(
centerX,
centerY,
childWidth,
childHeight,
centerX - childWidth / 2,
centerY - childHeight / 2,
centerX + childWidth / 2,
centerY + childHeight / 2,
1,
angle,
i,
));
}
return childPointList;
}
///角度转弧度
///弧度 =度数 * (π / 180)
///度数 =弧度 * (180 / π)
double radian(double angle) {
return angle * pi / 180;
}
2.子布局如何旋转?自动旋转?支持手势滑动旋转?快速滑动抬手继续旋转?
子布局如何旋转
所谓的旋转就是所有的子布局绕着圆形移动,布局一旦移动就代表中间位置改变,根据上面我们计算的子布局位置的公式来看:
中心点坐标
x=width/2+sin(a)*R
y=height/2+cos(a)*R
因为width
和R
都是已知并且定下来的尺寸,所以说,想要改变中心点坐标,只需修改 角度a就可以了。要想达到旋转效果的话就是让所有的子布局都同时移动相同的角度即可。
子布局原始角度值:
double angle = startAngle + averageAngle * i;
我们可以在此基础上加上一个可变的角度值,通过改变这个值,所有的子布局都会同时加上此值同时移动了位置。如下:
double angle = startAngle + averageAngle * i + rotateAngle;
其中 rotateAngle 就是可变的值。改变这个值就能让布局动起来
自动旋转
同理,我们只要搞个定时器,周期性修改这个rotateAngle
值,并setState(() {})
刷新下,看起来就自动旋转了。
支持手势滑动旋转
大家已经知道通过修改rotateAngle
值去实现旋转,那么支持手势滑动旋转顾名思义就是通过手势修改这个rotateAngle值就OK,那么手势处理Flutter提供了GestureDetector
组件,这个组件功能很强大,这里面我们使用了他的几个回调方法。
本次实现直接使用水平滑动监听,大家如果想兼容竖直滑动可以自己尝试修改就可以。
GestureDetector(
///水平滑动按下
onHorizontalDragDown: (DragDownDetails details) {…},
///水平滑动开始
onHorizontalDragStart: (DragStartDetails details) {
//记录拖动开始时当前的选择角度值
downAngle = rotateAngle;
//记录拖动开始时的x坐标
downX = details.globalPosition.dx;
},
///水平滑动中
onHorizontalDragUpdate: (DragUpdateDetails details) {
//滑动中X坐标值
var updateX = details.globalPosition.dx;
//计算当前旋转角度值并刷新
rotateAngle = (downX - updateX) * slipRatio + downAngle;
if (mounted) setState(() {});
},
///水平滑动结束
onHorizontalDragEnd: (DragEndDetails details) {…},
///滑动取消
onHorizontalDragCancel: () {…},
behavior: HitTestBehavior.opaque,//deferToChild translucent
child: xxx,
);
快速滑动抬手继续旋转
抬手还能继续旋转,也就是当我们快速滑动抬手的时候只要继续修改旋转角度值rotateAngle
就可以达到继续旋转的效果。当我们抬手的时候我们可以拿到什么呢?
例如:当我们骑着小黄单车在大路上快速的蹬着脚蹬子然后停止蹬,你的小黄已当时的速度飞驰在这个大路上,由于地面的摩擦力的影响,速度会越来越小,最后停止。
///水平滑动结束
onHorizontalDragEnd: (DragEndDetails details) {
//x方向上每秒速度的像素数
velocityX = details.velocity.pixelsPerSecond.dx;
_controller.reset();
_controller.forward();
},
//动画设置rotateAngle
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1000),
);
animation = CurvedAnimation(
parent: _controller,
curve: Curves.linearToEaseOut,
);
animation = new Tween(begin: 1, end: 0).animate(animation)
…addListener(() {
//当前速度
var velocity = animation.value * -velocityX;
var offsetX = radius != 0 ? velocity * 5 / (2 * pi * radius) : velocity;
rotateAngle += offsetX;
setState(() => {});
})
…addStatusListener((status) {
if (status == AnimationStatus.completed) {
rotateAngle = rotateAngle % 360;
_startRotateTimer();
}
});
3.支持X轴旋转
上图是X轴方向查看旋转切面图,按照x轴旋转所有的x坐标都是相同的,y值从上往下不断增加。因为绕着X轴旋转时,X坐标是不变的,Y坐标值改变,当旋转了a角度时,现在的Y坐标如图所示为
Y坐标旋转后=height/2+y*cos(a) y值我们已经在上面计算过了,y=cos(a)*R
所以最终的计算公式是:
Y坐标值=height/2+cos(a)Rcos(a)
cos(a)在a=[0,90]区间时对应的值是1-0 即是 a=0度时cos(a)=1,就是原始状态(与Y轴平行),a=90度时cos(a)=0,就是与Y轴垂直准状态。所以我们可以设置a在0-90之间即可。
4.支持前后缩放子布局(起始角度为前,相对位置为后,最前面最大,反而越小)
上图为cos余弦曲线图。0
度和360
度最大 ,180
度最小,刚好与我们设计的初始值从0开始,然后逆时针绕一圈角度从0-360
度。
所以缩放比scale计算公式可以写为:
var scale = (1 - minScale) / 2 * (1 + cos(radian(angle - startAngle))) + minScale;
minScale
为最小缩放比,为了让缩放有个极限值,即 scale范围为:(minScale,1)
5.多个布局叠加时前面遮挡后面
从视觉感受,靠近前面的布局应该遮挡后面的布局,在Android当中bringToFront()
方法可以让布局置于前面,Flutter没有提供此方法,我们该如何处理这种情况呢?
Flutter提供一个Stack布局,也叫层叠式布局,当我们添加子布局到Stack布局中时,后面添加的会遮住前面添加的,所以只要我们在添加子布局的时候按照由后到前来添加即可。话说怎么知道是前是后呢?
知道实现思路现在要解决的问题是:
如何区分前与后?有什么条件可以区分?
1、根据坐标值?Y坐标小就是后面,Y坐标大就是前面?
答案是不一定;因为当我启动角度不是0的时候,比如是90度,那么最右面是前面,最左边是后面,这个时候是X坐标的大小区分前后关系,所以说单独使用坐标值的大小来决定前后关系是不对的。
如何成为Android高级架构师!
架构师必须具备抽象思维和分析的能力,这是你进行系统分析和系统分解的基本素质。只有具备这样的能力,架构师才能看清系统的整体,掌控全局,这也是架构师大局观的形成基础。 你如何具备这种能力呢?一是来自于经验,二是来自于学习。
架构师不仅要具备在问题领域上的经验,也需要具备在软件工程领域内的经验。也就是说,架构师必须能够准确得理解需求,然后用软件工程的思想,把需求转化和分解成可用计算机语言实现的程度。经验的积累是需要一个时间过程的,这个过程谁也帮不了你,是需要你去经历的。
但是,如果你有意识地去培养,不断吸取前人的经验的话,还是可以缩短这个周期的。这也是我整理架构师进阶此系列的始动力之一。
成为Android架构师必备知识技能
对应导图的学习笔记(由阿里P8大牛手写,我负责整理成PDF笔记)
部分内容展示
《设计思想解读开源框架》
- 目录
- 热修复设计
- 插件化框架设计
《360°全方面性能优化》
- 设计思想与代码质量优化
- 程序性能优化
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
容展示
《设计思想解读开源框架》
- 目录
[外链图片转存中…(img-rdQg4cjm-1714998815444)] - 热修复设计
[外链图片转存中…(img-VjPsHWWd-1714998815444)] - 插件化框架设计
[外链图片转存中…(img-snznhC8J-1714998815445)]
《360°全方面性能优化》
[外链图片转存中…(img-ycfMIYnb-1714998815446)] - 设计思想与代码质量优化
[外链图片转存中…(img-Y2K9vT3O-1714998815447)] - 程序性能优化
[外链图片转存中…(img-lpk35fKh-1714998815447)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!