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

Hyperkeratosis

You should make your question more clearer. How is it not smooth? I even don't know what firstTop or minimumTop is. It's better if you can give a gif for it or a debug repo is the best. The more information you give, the faster you receive right answer. – Haematothermal

What exactly problem do you have? Can you create a video of a problem? I have example of translation of a view with a pan recogniser github.com/K-Be/ViewMovingTest and do not have a lag before apply to the view a transformation. – Fancyfree

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.

Fancyfree

I've added example of vertical moving with a prediction and without prediction. github.com/K-Be/ViewMovingTest, the target is VerticalMoving. – Fancyfree

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)];
}];

Catalase

Answer 3

I think the original question was asking how to perform this animation smoothly. However, if the map view constraints are linked to the dragged view constraints, due to the polynomial relationship between autolayout constraints and laying out the MKMapView the computation will be quite intense and therefore there will likely be lag. I suggest disconnecting the map constraints from the dragged view constraints if the UI/UX design allows.

Siana