How can I imitate a beating heart?

Question

I make a game, and I want my heart to look like it's a beating. My approach is to have two images of the heart. One is bigger than the other. I have UIButton (because to start the game I want to click on the heart to do this), and another large version of the heart is like UIImageView. So far I have this, so my heart changes size every second, but I want it to be more realistic. For example, every second it will change to a big heart and back (but not immediately, so it is clearly visible). How can i do this? Here is my code:

PlayViewController.h

#import <UIKit/UIKit.h> @interface PlayViewController : UIViewController { IBOutlet UIButton *heartButton; IBOutlet UIImageView *heartBig; NSTimer *heartBeat; } @end 

PlayViewController.m

 #import "PlayViewController.h" @interface PlayViewController () @end @implementation PlayViewController - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Custom initialization } return self; } - (void)viewDidLoad { [super viewDidLoad]; heartBig.hidden = YES; heartBeat = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(beatHeart) userInfo:nil repeats:YES]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (void)beatHeart { if(heartBig.hidden == true) heartBig.hidden = false; else heartBig.hidden = true; } @end 

Answer 1

Try this heartbeat animation:

 CABasicAnimation *theAnimation; theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.scale"]; theAnimation.duration=0.7; theAnimation.repeatCount=HUGE_VALF; theAnimation.autoreverses=YES; theAnimation.fromValue=[NSNumber numberWithFloat:1.0]; theAnimation.toValue=[NSNumber numberWithFloat:0.7]; theAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; [self.heart.layer addAnimation:theAnimation forKey:@"animateOpacity"]; 

Answer 2

 /** Heart beating animation */ func addHeartBeatAnimation () { let beatLong: CABasicAnimation = CABasicAnimation(keyPath: "transform.scale") beatLong.fromValue = NSValue(CGSize: CGSizeMake(1, 1)) beatLong.toValue = NSValue(CGSize: CGSizeMake(0.7, 0.7)) beatLong.autoreverses = true beatLong.duration = 0.5 beatLong.beginTime = 0.0 let beatShort: CABasicAnimation = CABasicAnimation(keyPath: "transform.scale") beatShort.fromValue = NSValue(CGSize: CGSizeMake(1, 1)) beatShort.toValue = NSValue(CGSize: CGSizeMake(0.5, 0.5)) beatShort.autoreverses = true beatShort.duration = 0.7 beatShort.beginTime = beatLong.duration beatLong.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn ) let heartBeatAnim: CAAnimationGroup = CAAnimationGroup() heartBeatAnim.animations = [beatLong, beatShort] heartBeatAnim.duration = beatShort.beginTime + beatShort.duration heartBeatAnim.fillMode = kCAFillModeForwards heartBeatAnim.removedOnCompletion = false heartBeatAnim.repeatCount = FLT_MAX self.layer.addAnimation(heartBeatAnim, forKey: nil) } 

Based on BCBlanka's answer, a bit more realistic animation

Answer 3

So far I have this, so my heart changes size every second, but I want it to be more realistic.

The obvious suggestion is to use a sequence of images to give you a "smooth" animation.

Answer 4

BCBlanka used Core Animation, if someone wants to use the Facebook POPAnimation library, this will be the implementation:

 POPBasicAnimation *beatingHeartAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewScaleXY]; beatingHeartAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; beatingHeartAnim.fromValue = [NSValue valueWithCGSize:CGSizeMake(1, 1)]; beatingHeartAnim.toValue = [NSValue valueWithCGSize:CGSizeMake(0.7, 0.7)]; beatingHeartAnim.autoreverses = YES; beatingHeartAnim.duration = 1.0; beatingHeartAnim.repeatCount = 120; [heart pop_addAnimation:beatingHeartAnim forKey:@"beatingHeartAnim"]; 

Answer 5

Here is another example from Facebook POP, with a more “natural” impulse.

 POPBasicAnimation *pulseAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewScaleXY]; pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; pulseAnimation.fromValue = [NSValue valueWithCGSize:CGSizeMake(1, 1)]; pulseAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.1, 1.1)]; pulseAnimation.autoreverses = YES; pulseAnimation.duration = 1.0; pulseAnimation.repeatForever = YES; [self pop_addAnimation:pulseAnimation forKey:@"pulseAnimation"];