Question

我是Core Graphics的新手，想要在各个方向画一个圆圈和线条，并设置动画，让人感觉光线从圆圈中出来。在

请建议如何在圆圈的各个方向上实现线条动画效果。

我到目前为止绘制圆圈的代码是：

- (void)drawRect:(CGRect)iRect
{
    // Drawing code
    CGContextRef aContext = UIGraphicsGetCurrentContext();
    [self drawMeWithContext:aContext withRect:iRect];
    [self drawBadgeGradientWithContext:aContext withRect:iRect];


}



- (void)drawMeWithContext:(CGContextRef)iContext withRect:(CGRect)iRect {
    CGContextSaveGState(iContext);

    CGFloat aRadius = CGRectGetMaxY(iRect) * kBadgeCornerRadius;
    CGFloat aBuffer = CGRectGetMaxY(iRect) * kScreenBuffer;
    CGFloat aMaxX = CGRectGetMaxX(iRect) - aBuffer;
    CGFloat aMaxY = CGRectGetMaxY(iRect) - aBuffer;
    CGFloat aMinX = CGRectGetMinX(iRect) + aBuffer;
    CGFloat aMinY = CGRectGetMinY(iRect) + aBuffer;

    CGContextBeginPath(iContext);
    CGContextSetFillColorWithColor(iContext, [_MyColor CGColor]);
    CGContextAddArc(iContext, aMaxX - aRadius, aMinY + aRadius, aRadius, M_PI + M_PI/2, 0, 0);
    CGContextAddArc(iContext, aMaxX - aRadius, aMaxY - aRadius, aRadius, 0, M_PI/2, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMaxY - aRadius, aRadius, M_PI/2, M_PI, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMinY + aRadius, aRadius, M_PI, M_PI + M_PI/2, 0);
    CGContextClosePath(iContext);
    CGContextFillPath(iContext);
    CGContextRestoreGState(iContext);
}


- (void)drawBadgeGradientWithContext:(CGContextRef)iContext withRect:(CGRect)iRect {
    CGContextSaveGState(iContext);

    CGFloat aRadius = CGRectGetMaxY(iRect) * kBadgeCornerRadius;
    CGFloat aBuffer = CGRectGetMaxY(iRect) * kScreenBuffer;
    CGFloat aMaxX = CGRectGetMaxX(iRect) - aBuffer;
    CGFloat aMaxY = CGRectGetMaxY(iRect) - aBuffer;
    CGFloat aMinX = CGRectGetMinX(iRect) + aBuffer;
    CGFloat aMinY = CGRectGetMinY(iRect) + aBuffer;

    CGContextBeginPath(iContext);
    CGContextAddArc(iContext, aMaxX - aRadius, aMinY + aRadius, aRadius, M_PI+(M_PI/2), 0, 0);
    CGContextAddArc(iContext, aMaxX - aRadius, aMaxY - aRadius, aRadius, 0, M_PI/2, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMaxY - aRadius, aRadius, M_PI/2, M_PI, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMinY + aRadius, aRadius, M_PI, M_PI+M_PI/2, 0);
    CGContextClip(iContext);

    size_t aNumberOfLocations = 2;
    CGFloat aLocations[2] = {0.0, 0.5};
//  CGFloat aComponents[8] = {0.98, 0.96, 0.98, 1.0, 0.698, 0.016, 0.075, 1.0};

    CGColorSpaceRef aColorSpace;
    CGGradientRef aGradient;
    aColorSpace = CGColorSpaceCreateDeviceRGB();
    aGradient = CGGradientCreateWithColorComponents (aColorSpace, _MyColorComponent, aLocations, aNumberOfLocations);
    CGColorGetComponents([[UIColor redColor] CGColor]);
    CGColorGetComponents([[UIColor whiteColor] CGColor]);
    CGPoint aStartPoint;
    CGPoint anEndPoint;
    aStartPoint.x = 0;
    aStartPoint.y = 0;
    anEndPoint.x = 0;
    anEndPoint.y = aMaxY;

    CGContextDrawLinearGradient (iContext, aGradient, aStartPoint, anEndPoint, 0);
    CGColorSpaceRelease(aColorSpace);
    CGGradientRelease(aGradient);
    CGContextRestoreGState(iContext);
}

Answer 1

假设你想画六行。单位圆的周长为2π。因此，第一行将具有π/ 3弧度的旋转（即2π除以6），第二行将具有2π/ 3弧度的旋转等。将该旋转应用于每一行。

现在您需要将线条转换为圆圈外部。那么，你知道你想要每条线的圆的角度（π/3,2π/ 3 ...2π）和圆的半径。因此，您可以创建极坐标（例如（半径，π/ 3））。将此极点转换为笛卡尔点（例如（1,2））。你怎么做到这一点？这是怎么回事。

要获得x坐标，找到cos（π/ 3），然后将其乘以半径。为y做同样的事情，但改用sin。

（2，π/ 3）是极性=＆gt; （2cos（π/ 3），2sin（π/ 3））是笛卡儿。

现在您已拥有x和y坐标对，将每条线转换为其笛卡尔点。现在你需要为线条设置动画。我对iOS上的旋转能力不太熟悉。你能围绕圆心旋转每条线吗？否则，你必须重新计算圆圈上每个线应该到达下一个点的点，然后自己旋转这些线。

这涉及到相当数量的数学。如果您需要其他帮助，请与我们联系。

围绕圆形绘制和动画线条

1 个答案: