flutter仿写网易云鲸云动画

600 阅读1分钟

孤单星球

跳动旋律

贝塞尔曲线画圆控制点的计算

 /// 控制点的计算, 可以以此画圆 θ 为圆N等分的角度, 不要大于90度
  /// (x0,y0),(x3, y3)为起点和终点, (x,y)为圆心
  /// 贝塞尔曲线画圆,若分成n等分,则曲线端点到最近控制点的最佳距离为(4/3)*((1-cos(θ/2))/sin(θ/2))*r , θ = 2π/n;
  /// x1 = x0 - (4/3)*((1-cos(θ/2))/sin(θ/2))*(y0-y); (x ,y)为圆心
  /// y1 =y0 + (4/3)*((1-cos(θ/2))/sin(θ/2))*(x0-x)
  /// x2 =x3 + (4/3)*((1-cos(θ/2))/sin(θ/2))*(y3-y)
  /// y2= y3 - (4/3)*((1-cos(θ/2))/sin(θ/2))*(x3-x)
  static getCubicControlPoint(
      {@required x0,
      @required y0,
      @required x3,
      @required y3,
      @required radians,
      @required x,
      @required y}) {
    double h = 4 / 3 * math.tan(radians / 4);
    double x1 = x0 - (h * (y0 - y));
    double y1 = y0 + h * (x0 - x);
    double x2 = x3 + h * (y3 - y);
    double y2 = y3 - (h * (x3 - x));
    return {
      'x1': x1,
      'x2': x2,
      'y1': y1,
      'y2': y2,
    };
  }

实现的效果还是和预期效果有差异,如何取圆上的一点,利用贝塞尔曲线画圆,求贝塞尔控制点等

demo地址