iOS怎么用代码实现这样奇怪的动画

如图动画，需要先分析，得出基本结论

1. 首先是矩形的最大内接圆弧。圆弧过左右两个顶点和下边的中间点，然后再分析已知条件和位置条件，需要求哪个变量
   

画图得知以下两个等式。

已知条件矩形的宽$w$和高$h$，联立解得$r$和角$A$

2. 根据最大内接圆弧再加上圆弧的粗 $lineWidth$，还有两头是圆头，所以第一步需要算出来的其实是绿色矩形的结果。绿色矩形的宽高如下：

如图三个圆弧其实是同心的，只是半径不同，相差$\frac{lineWidth}{2}$

3. 计算完毕，动手画线就比较简单了

+ (UIBezierPath *)makeRoundPath_2:(CGRect)frame {

    CGFloat lineWidth = frame.size.height / 2; // 设置线宽为高度的一半 比较好看

    CGFloat w = frame.size.width - lineWidth;
    CGFloat h = frame.size.height - lineWidth;
    
    CGFloat r = (w*w/4 + h*h)/(2*h); // 绿色矩形最大内接圆弧半径

    CGFloat cosA = 1-h/r;
    CGFloat aaA = acos(cosA);
    CGFloat aA = M_PI_2 - aaA;
    CGFloat aB = M_PI_2 + aaA;
    CGFloat r1 = r- lineWidth / 2;//里边大圆弧
    CGFloat r2 = r + lineWidth / 2;//外边大圆弧
    CGFloat r3 = lineWidth / 2;// 线头小圆

    CGPoint center1 = CGPointMake(frame.size.width/2, h - r + r3 );

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path addArcWithCenter:center1
                    radius:r1
                startAngle:aA
                  endAngle:aB
                 clockwise:YES];

    CGPoint center3 = CGPointMake(lineWidth / 2, lineWidth / 2);

    [path addArcWithCenter:center3
                    radius:r3
                startAngle:aB + M_PI
                  endAngle:aB
                 clockwise:NO];

    [path addArcWithCenter:center1
                    radius:r2
                startAngle:aB
                  endAngle:aA
                 clockwise:NO];

    CGPoint center4 = CGPointMake(frame.size.width - lineWidth / 2, lineWidth / 2);

    [path addArcWithCenter:center4
                    radius:r3
                startAngle:aA
                  endAngle:aA - M_PI
                 clockwise:NO];

    [path closePath];

    return path;

}
复制代码

代码地址

github.com/dacaiguoguo…