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.
Next, you need to instantiate all of your image views, add them to the view, and set up all of the gesture recognizers.
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.
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.
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
