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

Question

我需要显示两个发射信号的点.表示信号的方式是我们在Mac中常见的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.不确定它是否正是您正在寻找的,但希望它指出您正确的方向.