在ios中以同心圆形式获得类似动画的波形

Question

我需要显示两个点发射信号。表示信号的方式是我们在Macs中常见的wifi信号强度指示器。

但是，有一些变化：

1. 倒置了。来源指向顶部。请看下面的图片：
2. 我需要设置线条的动画，以指示信号源正在发出信号。



我可以通过覆盖View类的drawRect来获取附加的图像：

CGContext context = UIGraphics.GetCurrentContext();
context.SetLineWidth(2.0f);

UIColor color = UIColor.FromRGB(65, 137, 77); 
context.SetStrokeColorWithColor(color.CGColor);

float maxRadius = rect.Height; 
const float delta = 15; 
float Y = center.Y; 
for (float currentRadius = maxRadius; currentRadius > 0; currentRadius -= delta) {              
    context.AddArc(center.X, Y, currentRadius, -ToRadians(startAngle), -ToRadians(endAngle), true);
    context.StrokePath(); 
}

我不在这里。 如果有人能指出我正确的方向，那将是非常棒的！

Answer 1

我使用Core Animation拍摄了这张照片。我只需为每个波形添加一个圆形的形状图层，然后动态调整它们的strokeStart和strokeEnd属性，以使其改变每个波形的宽度。所以输出是这样的：

这是初始化代码：

- (void)addWavesToView
{
    CGRect rect = CGRectMake(0.0f, 0.0f, 300.0f, 300.0f);
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:rect];

    for (NSInteger i = 0; i < 10; ++i) {
        CAShapeLayer *waveLayer = [CAShapeLayer layer];
        waveLayer.bounds = rect;
        waveLayer.position = CGPointMake(300.0f, 100.0f);
        waveLayer.strokeColor = [[UIColor lightGrayColor] CGColor];
        waveLayer.fillColor = [[UIColor clearColor] CGColor];
        waveLayer.lineWidth = 5.0f;
        waveLayer.path = circlePath.CGPath;

        // Translate on the y axis to shift all the layers down while
        // we're creating them. Could do this with the position value as well
        // but this is a little cleaner.
        waveLayer.transform = CATransform3DMakeTranslation(0.0f, i*25, 0.0f);

        // strokeStart begins at 3:00. You would need to transform (rotate)
        // the layer 90 deg CCW to have it start at 12:00
        waveLayer.strokeStart = 0.25 - ((i+1) * 0.01f);
        waveLayer.strokeEnd = 0.25 + ((i+1) * 0.01f);

        [self.view.layer addSublayer:waveLayer];
    }
}

然后在这里我为每一层添加动画：

- (void)addAnimationsToLayers
{
    NSInteger timeOffset = 10;
    for (CALayer *layer in self.view.layer.sublayers) {
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeColor"];
        animation.duration = 10.0f;

        // Stagger the animations so they don't begin until the
        // desired time in each
        animation.timeOffset = timeOffset--;
        animation.toValue = (id)[[UIColor lightGrayColor] CGColor];
        animation.fromValue = (id)[[UIColor darkGrayColor] CGColor];

        // Repeat forever
        animation.repeatCount = HUGE_VALF;

        // Run it at 10x. You can adjust this to taste.
        animation.speed = 10;

        // Add to the layer to start the animation
        [layer addAnimation:animation forKey:@"strokeColor"];
    }

}

我将其发布到github。不确定它是否正是您正在寻找的，但希望它指出您正确的方向。