How can I simulate a beating heart?

Question

I am making a game and I want the heart to look like it is beating. My approach is to have two images of a heart. One is bigger then the other. I have one as a UIButton (because to start the game I want to click the heart to do so), and the other bigger version of the heart is as UIImageView. So far I have it so the heart changes size every second, but I want it to be more realistic. For example, every second, it will change to the big heart and back (but not instantly 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 pulse 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, little more realistic animation

Answer 3

So far I have it so the 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.