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

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

test.gif

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

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

画图得知以下两个等式。

rsin(A)=w/2r*sin(A)=w/2
rrcos(A)=hr-r*cos(A)=h

已知条件矩形的宽ww和高hh,联立解得rr和角AA

r=w24+h22hr=\frac{w^2}{4}+\frac{h^2}{2*h}
cos(A)=1hr;A=acos(cos(1hr));由cos(A) = 1-\frac{h}{r};得 A = acos(cos(1-\frac{h}{r}));
  1. 根据最大内接圆弧再加上圆弧的粗 lineWidthlineWidth,还有两头是圆头,所以第一步需要算出来的其实是绿色矩形的结果。绿色矩形的宽高如下:
greenW=wlineWidthgreenW=w-lineWidth
greenH=hlineWidthgreenH=h-lineWidth

5701657962026_.pic_副本的副本.png
如图三个圆弧其实是同心的,只是半径不同,相差lineWidth2\frac{lineWidth}{2}

  1. 计算完毕,动手画线就比较简单了
+ (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…

分类:
前端
标签: