Creating an animated location marker

Question

How could I, and would it be easy, to create an location marker I can put on top of an UIImage. I have a floor plan and determine where the user is using iBeacons. I would like to animate a location marker on the location of the beacon where the user is standing near, something similar to the one on Maps.

Any suggestions how to do this? Ideally it would be a circle, expanding, and slowly fading away. I just don't have any experience with animation and the best way to do this.

Thanks in advance!

[EDIT:] This is a screenshot of the (prototype) view, so I would like to have the animation on one of the labels.

Answer 1

I did a demonstration with something like this. I plotted a blue circle at the beacon location, with a light blue circle whose radius varied according to the estimated distance from the beacon to the mobile device. Here's a small screen capture showing what the effect looks like (the light blue square is a nearby object depicted on the map):

The code that draws this takes the estimated distance to the beacon in meters, and adjusts it by a radiusMultiplier for the scale of the map. The centerX and centerY parameters tell where the dot is plotted on the screen:

-(void)setDistance: (double) distance centerX: (int) pixelCenterX centerY: (int) pixelCenterY radiusMultiplier: (double) radiusMultiplier {
    // distance is in meters
    if (distance < 0) {
        NSLog(@"Not setting distance because it is < 0");
        return;
    }
    int pixelRadius = distance*22*radiusMultiplier;
    if (pixelRadius > 160) {
        pixelRadius = 160;
    }
    if (pixelRadius < 14) {
        pixelRadius = 14;
    }

    NSLog(@"Changing radius of circle to %d", pixelRadius);
    if (_circle == Nil) {
        _circle = [[NASClickBehindView alloc] init];
        _circle.backgroundColor = [UIColor blueColor];
        _circle.alpha = 0.2;
        [_circle setFrame:CGRectMake(pixelCenterX-pixelRadius,pixelCenterY-pixelRadius,pixelRadius*2,pixelRadius*2)];
        [self.webView addSubview:_circle];
        _circle.tag = 100;
    }
    else {
        [_circle setFrame:CGRectMake(pixelCenterX-pixelRadius,pixelCenterY-pixelRadius,pixelRadius*2,pixelRadius*2)];
    }

    _circle.layer.cornerRadius = pixelRadius;

    if (_centerDot == Nil) {
        _centerDot = [[NASClickBehindView alloc] init];
        _centerDot.alpha = 0.9;
        _centerDot.layer.cornerRadius = 8;
        _centerDot.backgroundColor = [UIColor blueColor];
        [_centerDot setFrame:CGRectMake(pixelCenterX-8,pixelCenterY-8,16,16)];
        [self.webView addSubview:_centerDot];
        _centerDot.tag = 100;
    }
    else {
        [_centerDot setFrame:CGRectMake(pixelCenterX-8,pixelCenterY-8,16,16)];
    }
}