​Flutter自定义之旋转木马 - 带你回到童年时光

作者:龙之音

来源:https://www.jianshu.com/p/4512486fc52b

效果分析

1. 子布局按照圆形顺序放置且平分角度

2. 子布局旋转、支持手势滑动旋转、快速滑动抬手继续旋转、自动旋转

3. 支持X轴旋转

4. 支持前后缩放子布局（起始角度为前，相对位置为后，最前面最大，反而越小）

5. 多个布局叠加时前面遮挡后面

效果难点问题

• Flutter如何实现控件布局达到3D效果？

• Flutter如何实现子控件旋转、自动旋转、手势滑动时关联子控件旋转滚动？快速滑动抬手继续旋转滚动？

• Flutter如何实现多个布局叠加时前面遮挡后面？

1.子布局按照圆形顺序放置且平分角度

如上图所示：

圆形布局.png

如上图所示(参考系:最下方为0度，逆时针旋转角度增加)

 1第一个点
 2解：根据已知条件列方程式
 3x2=width/2+sin(a)*R
 4y2=height/2+cos(a)*R    
 5
 6第二个点
 7解：根据已知条件列方程式①
 8① x=width/2-sin(b)*R 
 9   y=height/2-cos(b)*R
10因为b=a-180,所以带入①方程得：
11② x=width/2-sin(a-180)*R
12   y=height/2-cos(a-180)*R 
13又因为sin（k*360+a)=sin(a),所以②方式可以修改为：
14③ x=width/2-sin(180+a)*R
15   y=height/2-cos(180+a)*R
16又又因为 sin(180+a)=-sin(a),cos(180+a)=-cosa 带入③方程式得：
17④ x=width/2+sin(a)*R 
18  y=height/2+cos(a)*R 
19
20由上面2点计算得，每个子布局的中心点坐标公式统一为：
21x=width/2+sin(a)*R 
22y=height/2+cos(a)*R 

以上所用三角函数公式表：

诱导公式1.jpg

通过上面计算得出子控件的位置公式后，开始我们的代码。

实现子控件按照圆形布局及平分角度代码如下:

 1//所有子控件的位置数据
 2//count:子控件数量；  
 3//startAngle:开始角度默认为0;  
 4//rotateAngle:偏转角度默认为0;
 5List<Point> _childPointList({Size size = Size.zero}) {
 6    List<Point> childPointList = [];
 7    double averageAngle = 360 / count;
 8    double radius = size.width / 2 - childWidth / 2;   
 9    for (int i = 0; i < count; i++) {
10       /********************子布局角度*****************/
11      double angle = startAngle + averageAngle * i + rotateAngle;
12      //子布局中心点坐标
13      var centerX = size.width / 2 + sin(radian(angle)) * radius;
14      var centerY = size.height / 2 + cos(radian(angle)) * radius;
15      childPointList.add(Point(
16        centerX,
17        centerY,
18        childWidth,
19        childHeight,
20        centerX - childWidth / 2,
21        centerY - childHeight / 2,
22        centerX + childWidth / 2,
23        centerY + childHeight / 2,
24        1,
25        angle,
26        i,
27      ));
28    }
29    return childPointList;
30  }
31
32///角度转弧度
33///弧度 =度数 * (π / 180）
34///度数 =弧度 * (180 / π）
35double radian(double angle) {
36    return angle * pi / 180;
37}

2.子布局如何旋转？自动旋转？支持手势滑动旋转？快速滑动抬手继续旋转？

子布局如何旋转

所谓的旋转就是所有的子布局绕着圆形移动，布局一旦移动就代表中间位置改变，根据上面我们计算的子布局位置的公式来看:

1中心点坐标
2x=width/2+sin(a)*R 
3y=height/2+cos(a)*R 

因为width和R都是已知并且定下来的尺寸，所以说，想要改变中心点坐标，只需修改
角度a就可以了。要想达到旋转效果的话就是让所有的子布局都同时移动相同的角度即可。

1子布局原始角度值:
2double angle = startAngle + averageAngle * i; 
3我们可以在此基础上加上一个可变的角度值，通过改变这个值，所有的子布局都会同时加上此值同时移动了位置。如下:
4double angle = startAngle + averageAngle * i + rotateAngle; 
5其中 rotateAngle 就是可变的值。改变这个值就能让布局动起来

自动旋转

同理，我们只要搞个定时器，周期性修改这个rotateAngle值，并setState(() {})刷新下，看起来就自动旋转了。

支持手势滑动旋转

大家已经知道通过修改rotateAngle值去实现旋转，那么支持手势滑动旋转顾名思义就是通过手势修改这个rotateAngle值就OK，那么手势处理Flutter提供了GestureDetector组件，这个组件功能很强大，这里面我们使用了他的几个回调方法。

 1本次实现直接使用水平滑动监听，大家如果想兼容竖直滑动可以自己尝试修改就可以。
 2GestureDetector(
 3        ///水平滑动按下
 4        onHorizontalDragDown: (DragDownDetails details) {...},
 5
 6        ///水平滑动开始
 7        onHorizontalDragStart: (DragStartDetails details) {
 8          //记录拖动开始时当前的选择角度值
 9          downAngle = rotateAngle;
10          //记录拖动开始时的x坐标
11          downX = details.globalPosition.dx;
12        },
13
14        ///水平滑动中
15        onHorizontalDragUpdate: (DragUpdateDetails details) {
16           //滑动中X坐标值
17          var updateX = details.globalPosition.dx;
18          //计算当前旋转角度值并刷新
19          rotateAngle = (downX - updateX) * slipRatio + downAngle;
20          if (mounted) setState(() {});
21        },
22
23        ///水平滑动结束
24        onHorizontalDragEnd: (DragEndDetails details) {...},
25
26        ///滑动取消
27        onHorizontalDragCancel: () {...},
28
29        behavior: HitTestBehavior.opaque,//deferToChild   translucent
30        child: xxx,
31);

快速滑动抬手继续旋转

抬手还能继续旋转，也就是当我们快速滑动抬手的时候只要继续修改旋转角度值rotateAngle就可以达到继续旋转的效果。当我们抬手的时候我们可以拿到什么呢？

例如：当我们骑着小黄单车在大路上快速的蹬着脚蹬子然后停止蹬，你的小黄已当时的速度飞驰在这个大路上，由于地面的摩擦力的影响，速度会越来越小，最后停止。

 1 ///水平滑动结束
 2onHorizontalDragEnd: (DragEndDetails details) {
 3          //x方向上每秒速度的像素数
 4          velocityX = details.velocity.pixelsPerSecond.dx; 
 5          _controller.reset();
 6          _controller.forward();
 7 },
 8
 9
10  //动画设置rotateAngle
11   _controller = AnimationController(
12      vsync: this,
13      duration: Duration(milliseconds: 1000),
14    );
15
16    animation = CurvedAnimation(
17      parent: _controller,
18      curve: Curves.linearToEaseOut,
19    );
20
21    animation = new Tween<double>(begin: 1, end: 0).animate(animation)
22      ..addListener(() {
23        //当前速度
24        var velocity = animation.value * -velocityX;
25        var offsetX = radius != 0 ? velocity * 5 / (2 * pi * radius) : velocity;
26        rotateAngle += offsetX;
27        setState(() => {});
28      })
29      ..addStatusListener((status) {
30        if (status == AnimationStatus.completed) {
31          rotateAngle = rotateAngle % 360;
32          _startRotateTimer();
33        }
34      });

3.支持X轴旋转

x轴旋转.png

1上图是X轴方向查看旋转切面图，按照x轴旋转所有的x坐标都是相同的，y值从上往下不断增加。因为绕着X轴旋转时，X坐标是不变的，Y坐标值改变，当旋转了a角度时，现在的Y坐标如图所示为
2
3Y坐标旋转后=height/2+y*cos(a)     y值我们已经在上面计算过了，y=cos(a)*R 
4所以最终的计算公式是:
5Y坐标值=height/2+cos(a)*R*cos(a)
6cos(a)在a=[0,90]区间时对应的值是1-0   即是 a=0度时cos(a)=1,就是原始状态(与Y轴平行)，a=90度时cos(a)=0,就是与Y轴垂直准状态。所以我们可以设置a在0-90之间即可。

4.支持前后缩放子布局（起始角度为前，相对位置为后，最前面最大，反而越小）

Cos.jpg

上图为cos余弦曲线图。0度和360度最大 ，180度最小，刚好与我们设计的初始值从0开始，然后逆时针绕一圈角度从0-360度。

缩放.png

所以缩放比scale计算公式可以写为：

1 var scale = (1 - minScale) / 2 * (1 + cos(radian(angle - startAngle))) + minScale;
2 minScale为最小缩放比，为了让缩放有个极限值，即 scale范围为：（minScale，1）

5.多个布局叠加时前面遮挡后面

从视觉感受，靠近前面的布局应该遮挡后面的布局，在Android当中bringToFront()方法可以让布局置于前面,Flutter没有提供此方法，我们该如何处理这种情况呢？

Flutter提供一个Stack布局，也叫层叠式布局，当我们添加子布局到Stack布局中时，后面添加的会遮住前面添加的，所以只要我们在添加子布局的时候按照由后到前来添加即可。话说怎么知道是前是后呢？

知道实现思路现在要解决的问题是：

如何区分前与后？有什么条件可以区分？

考虑中…

1、根据坐标值？Y坐标小就是后面，Y坐标大就是前面？

答案是不一定；因为当我启动角度不是0的时候，比如是90度，那么最右面是前面，最左边是后面，这个时候是X坐标的大小区分前后关系，所以说单独使用坐标值的大小来决定前后关系是不对的。

2、根据前大后小原则？根据缩放值排序来添加子布局？

答案是可行；因为我们已经实现了前面的布局缩放值是1，后面的缩放值越来越小，而且我们已经处理了启动角度问题，所以根据缩放值来实现是可行的。

 1///通过缩放值进行排序，从小到大
 2childPointList.sort((a, b) {
 3  return a.scale.compareTo(b.scale);
 4});
 5
 6///遍历添加子布局
 7Stack(
 8  children: childPointList.map(
 9              (Point point) {
10                return Positioned(
11                    width: point.width,
12                    left: point.left,
13                    top: point.top,
14                    child: this.widget.children[point.index]);
15              },
16            ).toList(),
17   ),

通过上面方式即可实现前后遮挡效果了。

小知识点

Flutter 之Stack 组件

Stack一个可以叠加子控件的布局，这里主要讲一下 Positioned，其他使用方式可以看下官网说明。

 1Positioned({
 2  Key key,
 3  this.left,
 4  this.top,
 5  this.right,
 6  this.bottom,
 7  this.width,
 8  this.height,
 9  @required Widget child,
10})

使用Positioned控制Widget的位置，通过Positioned可以随意摆放一个组件，有点像绝对布局。其中left、top 、right、
bottom分别代表离Stack左、上、右、底四边的距离。

Flutter之LayoutBuilder 组件

有时我们希望根据组件的大小确认组件的外观，比如竖屏的时候上下展示，横屏的时候左右展示，通过LayoutBuilder组件可以获取父组件的约束尺寸。

附：github链接：https://github.com/yixiaolunhui/my_flutter

推荐阅读