Instagram “like” animation iOS

Question

I want to implement the "like" animation that Instagram uses when you double tap a picture into my iOS app. It is a pretty slick feature and think it would add a little flavor to my app. I posted the before and after photos of the double tap. The heart fades in and out in about two seconds. I can not figure it out. Let me know!

Answer 1

Well you can do this using framesequance if you want to go with animation aproach.

Toast (as it is in android) aproach is also perfect and for that you can check a duplicate question Growl/toast style notifications library for iOS here.

Answer 2

#define LIKED 100 //change as per your requirement
#define UNLIKE 200 //change as per your requirement

- (void) likeUnlike:(UIGestureRecognizer *)sender
{
    [imageViewSub setHidden:NO];

    UIImageView *imageView = (UIImageView *)sender.view;

    if(imageView.tag==LIKED)
    {
        [imageViewSub setImage:[UIImage imageNamed:@"unlike.png"]];
        [imageView setTag:UNLIKE];
    }
    else
    {
        [imageViewSub setImage:[UIImage imageNamed:@"like.png"]];
        [imageView setTag:LIKED];
    }

    //here, your like/unlike update call to server for store selection.

    //set the frame exactly you want or
    //implement some other way to hide `imageViewSub` after like/unlike
    [imageViewSub setFrame:CGRectMake( 110, 180, 100, 100)];
    [UIView beginAnimations:@"anim" context:nil];
    [UIView setAnimationDuration:1.0];
    [imageViewSub setFrame:CGRectMake(200, 200, 0, 0)]; 
    [UIView commitAnimations];
}

//Add below code where you're added/showing your images. There's always two `UIImageView`s one is `main` and other one is `sub`.

[imageViewSub bringSubviewToFront:imageViewMain];

UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] init];
[doubleTap setNumberOfTapsRequired:2];
[doubleTap addTarget:self action:@selector(likeUnlike:)];
[imageViewMain addGestureRecognizer:doubleTap];
[doubleTap release];

PS imageViewMain will initially having tag from UNLIKED and imageViewSub having unlike.png and should be hidden.

Answer 3

In some of my projects I've been using MBProgressHUD . You can set the standard images/progress circle, or custom images, and customize the font of the label also. I pretty like it. If you use it together with performBlockAfterDelay (check this category) , it can save you a lot of time and make you life easier.