UIView animation with UIPanGestureRecognizer velocity way too fast (not decelerating)

Question

Update: Though I'd still like to solve this, I ended up switching to animateWithDuration:delay:options:animations:completion: and it works much nicer. It's missing that nice "bounce" at the end that the spring affords, but at least it's controllable.

I am trying to create a nice gesture-driven UI for iOS but am running into some difficulties getting the values to result in a nice natural feeling app.

I am using animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion: because I like the bouncy spring animation. I am initializing the velocity argument with the velocity as given by the gesture recognizer in the completed state. The problem is if I pan quickly enough and let go, the velocity is in the thousands, and my view ends up flying right off the screen and then bouncing back and forth with such dizzying vengeance.

I'm even adjusting the duration of the animation relative to the amount of distance the view needs to move, so that if there are only a few pixels needed, the animation will take less time. That, however, didn't solve the issue. It still ends up going nuts.

What I want to happen is the view should start out at whatever velocity the user is dragging it at, but it should quickly decelerate when reaching the target point and only bounce a little bit at the end (as it does if the velocity is something reasonable).

I wonder if I am using this method or the values correctly. Here is some code to show what I'm doing. Any help would be appreciated!

- (void)handlePanGesture:(UIPanGestureRecognizer*)gesture {
    CGPoint offset = [gesture translationInView:self.view];
    CGPoint velocity = [gesture velocityInView:self.view];

    NSLog(@"pan gesture state: %d, offset: %f velocity: %f", gesture.state, offset.x, velocity.x);
    static CGFloat initialX = 0;

    switch ( gesture.state ) {
        case UIGestureRecognizerStateBegan: {
            initialX = self.blurView.x;
        break; }

        case UIGestureRecognizerStateChanged: {
            self.blurView.x = initialX + offset.x;
        break; }

        default:
        case UIGestureRecognizerStateCancelled:
        case UIGestureRecognizerStateEnded: {
            if ( velocity.x > 0 )
                [self openMenuWithVelocity:velocity.x];
            else
                [self closeMenuWithVelocity:velocity.x];
        break; }
    }
}

- (void)openMenuWithVelocity:(CGFloat)velocity {
    if ( velocity < 0 )
        velocity = 1.5f;

    CGFloat distance = -40 - self.blurView.x;
    CGFloat distanceRatio = distance / 260;
    NSLog(@"distance: %f ratio: %f", distance, distanceRatio);

    [UIView animateWithDuration:(0.9f * distanceRatio) delay:0 usingSpringWithDamping:0.7 initialSpringVelocity:velocity options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        self.blurView.x = -40;
    } completion:^(BOOL finished) {
        self.isMenuOpen = YES;
    }];
}

score 13 · Answer 1 · answered Dec 18 '13 at 10:09

Came across this post while looking for a solution to a related issue. The problem is, you're passing in the velocity from UIPanGestureRecognizer, which is in points/second, when - animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion wants… a slightly odder value:

The initial spring velocity. For smooth start to the animation, match this value to the view’s velocity as it was prior to attachment. A value of 1 corresponds to the total animation distance traversed in one second. For example, if the total animation distance is 200 points and you want the start of the animation to match a view velocity of 100 pt/s, use a value of 0.5.

The animation method wants velocity in "distances" per second, not points per second. So, the value you should be passing in is (velocity from the gesture recognizer) / (total distance traveled during the animation).

That said, that's exactly what I'm doing and there's still a slight, yet noticeable "hiccup" between when the gesture recognizer is moving it, and when the animation picks up. That said, it should still work a lot better than what you had before.

hey did you ever figure out how to use intial spring velocity correctly? — bogardon, Feb 24 '15 at 00:31

Maciej Swic · Answer 2 · 2015-06-24T14:26:58.917

3

First you need to calculate the remaining distance that the animation will have to take care of. When you have the delta distance you can proceed to calculate the velocity like this:

CGFloat springVelocity = fabs(gestureRecognizerVelocity / distanceToAnimate);

For clean velocity transfer you must use UIViewAnimationOptionCurveLinear.

edited Jun 24 '15 at 14:26

answered Jun 24 '15 at 13:55

Maciej Swic

11,139
8
52
68

score 0 · Answer 3 · answered Aug 31 '17 at 08:06

I had a slightly different need, but my code may help, namely the velocity calculation, based on (pan velocity / pan translation).

A bit of context: I needed to use a panGestureRecognizer on the side of a UIView to resize it.

If the iPad is in portrait mode, the view is attached on the left, bottom and right sides, and I drag on the top border of the view to resize it.
If the iPad is in landscape mode, the view is attached to the left, top and bottom sides, and I drag on the right border to resize it.

This is what I used in the IBAction for the UIPanGestureRecognizer:

var velocity: CGFloat = 1

    switch gesture.state {
      case .changed:
        // Adjust the resizableView size according to the gesture translation
        let translation = gesture.translation(in: resizableView)
        let panVelocity = gesture.velocity(in: resizableView)

        if isPortrait { // defined previously in the class based on UIDevice orientation

            let newHeight = resizableViewHeightConstraint.constant + (-translation.y)
            resizableViewHeightConstraint.constant = newHeight

            // UIView animation initialSpringVelocity requires a velocity based on the total distance traveled during the animation
            velocity = -panVelocity.y / -panTranslation.y

        } else { // Landscape
            let newWidth = resizableViewWidthConstraint.constant + (translation.x)

            // Limit the resizing to half the width on the left and the full width on the right
            resizableViewWidthConstraint.constant = min(max(resizableViewInitialSize, newWidth), self.view.bounds.width)

            // UIView animation initialSpringVelocity requires a velocity based on the total distance traveled during the animation
            velocity = panVelocity.x / panTranslation.x
        }

        UIView.animate(withDuration: 0.5,
                       delay: 0,
                       usingSpringWithDamping: 1,
                       initialSpringVelocity: velocity,
                       options: [.curveEaseInOut],
                       animations: { 
                        self.view.layoutIfNeeded()
                        },
                       completion: nil)

        // Reset translation
        gesture.setTranslation(CGPoint.zero, in: resizableView)
 }

Hope that helps.

UIView animation with UIPanGestureRecognizer velocity way too fast (not decelerating)

3 Answers3