Image for post
Image for post

How to build Snapchat’s sticker pinch-zoom effect

Recently, I released a project with a friend called Yachtify where you can drag, resize, and rotate a sticker of Lil Yachty’s hair on any image.

It took me a while to build the system, so I thought I’d share the what I made.

To start out all you need is a view controller with an image view and a sticker image view.

Image for post
Image for post

Next, you need to instantiate all of your image views, add them to the view, and set up all of the gesture recognizers.

Image for post
Image for post

For the purpose of the article, I just made the view controller really simple with a white background and percentage-based layout for the background image view. You’ll have to provide your own images for the background image and the sticker.

Next, to get rid of the errors we need to implement the gesture recognizer handlers.

Image for post
Image for post

At this point we would be able to drag, resize, and rotate the sticker. However, it’s not as fluid as Snapchat because we can’t do all of the gestures at the same time. To get that effect we just need to implement a UIGestureRecognizerDelegate on our view controller and have our recognizers conform to it.

Image for post
Image for post
Image for post
Image for post

Including these three functions in our delegate implementation allows for whichever gesture recognizer that conforms to it to allow other recognizers to work alongside it.

And we’re done!

Check out some of my other work at:

Personal: http://www.komran.com

Dreamscape: https://itunes.apple.com/us/app/dreamscape-dream-journal-reader/id1088519144?mt=8

Written by

Hey, I’m Komran Ghahremani, and I love Swift, Soccer, and Pizza. Site: http://komran.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store