Animate constraint change smoothly with pan gesture

Question

How to animate constraint change smoothly with pan gesture in iOS?

I am trying to develop a screen, where a view is at bottom of the screen. And I've added pan gesture to that view. On dragging that view I want change top constraint of that view. Pan gesture is only allowed in vertical and downward direction. I have added some limit for dragging the view. It working but not smoothly. How to animate constraint change smoothly with pan gesture? Here is my code.

 - (void)handleGesture:(UIPanGestureRecognizer *)sender
{
    CGPoint velocity = [sender velocityInView:_locationContainer];

    [sender setTranslation:CGPointMake(0, 0) inView:self.view];

    if (fabs(velocity.y) > fabs(velocity.x)) {

        NSLog(@"velocity y %f ",velocity.y * 0.13);

        if(velocity.y < 0 && (self.locationDetailsTop.constant > minimumTop) )
        {
            NSLog(@"gesture moving Up");
            self.locationDetailsTop.constant = self.locationDetailsTop.constant - fabs(velocity.y * 0.1);
        }
        else if (self.locationDetailsTop.constant < firstTop)
        {
            NSLog(@"gesture moving Bottom");

            self.locationDetailsTop.constant = self.locationDetailsTop.constant + fabs(velocity.y * 0.1);
        }

        [self.view layoutIfNeeded];
        [UIView animateWithDuration:0.1 animations:^{
            [self.mapView setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.locationContainer.frame.origin.y)];
        }];
    }
}

This is sample image, My screen is of the same kind like this, But on my screen, there is a map view instead of the calender view

Answer 1

To move view while user is touching a screen, you can use translationInView: property. You can set a translation to current constraint's value and get new value (in a handler of UIGestureRecognizerStateBegan) and change a constraint's constant in a handler of UIGestureRecognizerStateChanged:

- (void)padRecognizerStateChanged:(UIPanGestureRecognizer*)sender
{
   if(sender.state == UIGestureRecognizerStateBegan)
   {
      [sender setTranslation:CGPointMake(0.0, [self getConstraintValue]) inView: _locationContainer]; 
   }
   else if (sender.state == UIGestureRecognizerStateChanged)
   {
      [self setConstraintValue: [sender translationInView:_locationContainer].y];
      [self.view setNeedsLayout];
   }
}

You can use velocity if you need to move view when a user raised his thumb over the screen for upward or downward movement. For example, you can implement deceleration effect.

Answer 2

If you want it to animate smoothly, try calling layoutIfNeeded inside the animation block like so:

[UIView animateWithDuration:0.1 animations:^{
    [self.view layoutIfNeeded];
    [self.mapView setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.locationContainer.frame.origin.y)];
}];