IOS - Creating a cool Tinder like drag animations
So what are we going to create?
Creating the draggable view
I’m going to skip all the boring project-structure-creation steps, just make sure you have a clean UIViewController you can work with.
Let’s create a new custom view, it’ll be our draggable view, I named it
GGDraggableView. We’ll need to add it to our view and set its size. (
GGView is the view of our main ViewController).
I spiced the view a bit and added a UIImageView to it with a pretty image of Bar Refaeli (find your own one)
Next step is to add a
UIPanGestureRecognizer to our view, this is the gesture recognizer we’ll use to pump our awesome drag animation.
This is how the view should look like
Gesture recognizer logic
When we break down how Tinder handles the pan gesture we notice they change two different parameters of the view during the dragging -
To get the desired effect we’re going to change these two parameters and link them to the drag “force”, which is how long the finger was dragged over the X axis of the screen. Here’s the flow I came up with to get pretty close results -
- Save the original position of the view when the pan gesture starts (so we can change it or ‘snap’ back to it)
- Find the gesture strength
CGFloat rotationStrength = MIN(xDistance / 320, 1);
- Calculate the pan gesture ‘strength’ and calculate the rotation + scale changes
- The rotation angle is in radians, 2π radians is 360° and we’d want a more subtle rotation, I went for 22.5° (1/16 of a full rotation)
CGFloat rotationAngle = (CGFloat) (2*M_PI * rotationStrength / 16);
- The scale will start at 1.0x and go down to 0.93x, so we need to “invert” the force when calculating it -
CGFloat scaleStrength = 1 - fabsf(rotationStrength) / 2;
CGFloat scale = MAX(scaleStrength, 0.93);
- Every time the gesture change update the following properties of the view
- Scale & rotation transformation
- When the pan gesture ends animate the view back to the original position and remove the transformations
- (This is the place we can also issue some kind of action when the user finish the gesture, we’ll leave that out for now)
This is what we have up until now
Adding an overlay and performing action on release
After getting the cool scale & rotation effect we’ll probably want to add some kind of ‘action overlay’ when the image is dragged left / right. We have several options on where to implement this behaviour, I’ll throw that in the same view but be advices that it’s probably better to extract this code to a different class.
Our pretty overlay view (I used two images for the different overlay modes)
Now let’s create and hide the overlay
And connect it to the gesture recognizer
We’re almost done
Performing the action
This is the easy part, we just need to check if the distance strength is large enough when the gestures ends.
We perform this check inside the
UIGestureRecognizerStateEnded case and can do anything we want.
That’s about it. Hope you enjoyed and that you’re a bit less scared about animations and gestures now :)
Everything is available on GitHub. Have fun!