IOS animated pulsing circle like blue ball on maps

Question

I'd like to know how to implement the blue ball with the pulsating ring of current location in maps, but without a mapview.

Basically I'd like to know the best way to have a blue ball with a pulsating ring on a normal UIView (or my custom view) whenever the user touches the screen, with that touch being the center of the blue ball.

I have 2 ideas, first I could implement an animation, which I was not able to do, but it is probably possible. Second I could get a sequence of images, like a gif, and display it wherever the user touches.

Which one is the best option? Or is there a better option?

Thank you.

Answer 1

Try this:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 100)];
view.backgroundColor = [UIColor blueColor];
view.layer.cornerRadius = 50;

[self.view addSubview:view];

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.duration = 0.2;
scaleAnimation.repeatCount = HUGE_VAL;
scaleAnimation.autoreverses = YES;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.2];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.8];

[view.layer addAnimation:scaleAnimation forKey:@"scale"];

Set the parameters as you like, to modify the effect.

Edit:

You have to add the QuartzCore framework, and include <QuartzCore/QuartzCore.h> for this to work.

Answer 2

try this for SWIFT

let view:UIView = UIView(frame: CGRectMake(200, 200, 100, 100))
view.layer.cornerRadius = 50
view.backgroundColor = UIColor.blueColor()

self.view.addSubview(view)

let scaleAnimation:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale")

scaleAnimation.duration = 0.5
scaleAnimation.repeatCount = 30.0
scaleAnimation.autoreverses = true
scaleAnimation.fromValue = 1.2;
scaleAnimation.toValue = 0.8;

view.layer.addAnimation(scaleAnimation, forKey: "scale")

Answer 3

Doing the animation programatically rather than with an image sequence is the better approach (and it's also how Apple do it). It has a number of advantages, not least of which is much better performance (your image sequence animation is unlikely to be running at 60FPS!).

You can achieve this animation in a number of ways: the easiest is probably to create your ring graphic in an image editor, and then create a UIImageView to hold it. You can then simply animate the scale, alpha, and frame properties (making sure your image view is set to resize the image on scale) of the view. To ensure your pulsating animation repeats indefinitely you can set the UIView animation repeat property. Your central 'blue ball' can be a separate UIImageView overlaid on top.

UIView animation is fairly straightforward, and Apple have a lot of sample code to get you going. You just enclose the properties you which to animate inside an animation block, along with your animation parameters (duration, repetition, etc), and iOS will do the rest. Searching on StackOverflow for 'UIView animation' will give you lots and lots of questions that might be of help.

Answer 4

Here is the Swift 5.3+ version.

Swift 5.5

let view = UIView(frame: CGRect(x:200, y:200, width:100, height:100))
view.layer.cornerRadius = 50
view.backgroundColor = .blue
self.view.addSubview(view)

let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.duration = 1.33
scaleAnimation.repeatCount = Float.infinity
scaleAnimation.autoreverses = true
scaleAnimation.fromValue = 1.5;
scaleAnimation.toValue = 0.75;
view.layer.add(scaleAnimation, forKey: "scale")

Best.