Eliasz Sawicki bio photo

Eliasz Sawicki

Software Engineer @ Bright Inventions

Personal blog Email Github

Hi! Today I will show you how to create a simple heart button that will simulate a heartbeat upon each tap. You can find an example project on my Github.

##Create a button First of all we have to create a button. We create a heart image from the resources that you can find in an example project and we assign it to our button. Then we simply position out button inside a view and assign a certain size to it. The size should equal our heart image’s size. Next, we add target to our button’s touchUpInside event. We will handle it in performHeartBeat: method.

##Button’s action Let’s take a look at our performHeartBeat: method. In order to perform our heart beat, we create an imageView from a heart_border image. ImageView’s initial frame should be smaller or the same as our button’s frame. If it is bigger, then the overall effect will look bad. Next we take care of our animation. In order to do that we use UIView’s animateWithDuration: method. In our animation’s body we make our imageView bigger by putting a CGAffineTransformMakeScale(3,3) as it’s transform property. We also want it to fade away. We achieve it by changing it’s alpha value to 0. In our completion block we remove our imageView from superview, because we don’t need it anymore.

Here is how our button should look before tapping:

Inactive button

After multiple taps:

Active button

This article is cross-posted with my my personal blog.