IOS drag, flick, or fling a UIView

Question

Was wondering how I would go about flicking or flinging a UIView, such as http://www.cardflick.co/ or https://squareup.com/cardcase demo videos.

I know how to drag i

Answer 1

The kind of effects that you are describing as simulating a king of gravity/inertia can be produced by means of ease-out (start fast, end slow) and ease-in (start slow, end fast) timing functions.

Support for easing out and easing in is available in iOS, so I don't think you need any external library nor hard work (although, as you can imagine, your effect will need a lot of fine tuning).

This will animate the translation of an object to a given position with an ease-out effect:

 [UIView animateWithDuration:2.0 delay:0
         options:UIViewAnimationOptionCurveEaseOut
         animations:^ {
               self.image.center = finalPosition;
         }
         completion:NULL];
 }

If you handle your gesture through a UIPanGestureRecognizer, the gesture recognizer will provide you with two important information to calculate the final position: velocity and translation, which represent respectively how fast and how much the object was moved.

You can install a pan gesture recognizer in your view (this would be the object you would like to animate, I guess) like this:

    UIPanGestureRecognizer* panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanFrom:)];
    [yourView addGestureRecognizer:panGestureRecognizer];
            [panGestureRecognizer release];

And then handle the animation in your handler:

 - (void)handlePanFrom:(UIPanGestureRecognizer*)recognizer {

    CGPoint translation = [recognizer translationInView:recognizer.view];
    CGPoint velocity = [recognizer velocityInView:recognizer.view];

    if (recognizer.state == UIGestureRecognizerStateBegan) {    
    } else if (recognizer.state == UIGestureRecognizerStateChanged) {
        
    } else if (recognizer.state == UIGestureRecognizerStateEnded) {
        
    }
 }