Flutter自定义之旋转木马

第一个点
解：根据已知条件列方程式
x2=width/2+sin(a)*R
y2=height/2+cos(a)*R    

第二个点
解：根据已知条件列方程式①
① x=width/2-sin(b)*R 
   y=height/2-cos(b)*R
因为b=a-180,所以带入①方程得：
② x=width/2-sin(a-180)*R
   y=height/2-cos(a-180)*R 
又因为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<Point> _childPointList({Size size = Size.zero}) {
    List<Point> 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;
}

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

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

本次实现直接使用水平滑动监听，大家如果想兼容竖直滑动可以自己尝试修改就可以。
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,
);

 ///水平滑动结束
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<double>(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();
        }
      });

上图是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)*R*cos(a)
cos(a)在a=[0,90]区间时对应的值是1-0   即是 a=0度时cos(a)=1,就是原始状态(与Y轴平行)，a=90度时cos(a)=0,就是与Y轴垂直准状态。所以我们可以设置a在0-90之间即可。

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

Positioned({
  Key key,
  this.left,
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  @required Widget child,
})