How to do smooth swipe animation in ios

Question

I want to do smooth swipe animation. I just want to that swipe only can be possible when user swipe the page from the right or left border only. Middle of the page swipe should not possible.Both the swipe should be possible left to right and right to left.

I have tried lots of swipe animation sample code or demo code. But its not what I want. I want animation like this https://itunes.apple.com/in/app/clear-tasks-to-do-list/id493136154?mt=8

In this app its like when we touch the right border its swipe smoothly.Please guide me to do this animation. Thanks in advance.

Answer 1

Sorry for the late reply. Just saw this question.

If you want your swipe operation to happen from the edges, create 2 subviews in the far ends (left and right) of your main view and give then a width of 30 or 40.

I believe you have 2 other views popin up from left and right. So inorder to do this you need to add 2 views right on top of your main view. Now for the left view, set it's right horizondal space constraint connecting to the main view to a value lesser than (-1)x width of the main view. For the right view set its right horizondal space constraint connecting to the main view to a value greater than the width of the main view, so that both the views are outside the main view

X stands for a value greater than or equal to the mainview's width

Add two NSLayoutConstraint variables as IBOutlet holding these 2 values.

NSLayoutConstraint *leftViewHorizondalRightPadding;
NSLayoutConstraint *rightViewHorizondalRightPadding;

Now add the UISwipeGestures to these subViews (indicated in orange).

UISwipeGestureRecognizer *leftToRightSwipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
    [leftToRightSwipe setDirection:UISwipeGestureRecognizerDirectionRight];
    [self.leftSubview addGestureRecognizer:leftToRightSwipe];

 UISwipeGestureRecognizer *rightToLeftSwipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
    [rightToLeftSwipe setDirection:UISwipeGestureRecognizerDirectionLeft];
    [self.rightSubview addGestureRecognizer:rightToLeftSwipe];

///Now in the swipe handler distinguish the swipe actions
-(void)handleSwipe:(UISwipeGestureRecognizer *)recognizer {
    NSLog(@"Swipe received.");
    if (recognizer.direction == UISwipeGestureRecognizerDirectionRight) {
    //It's leftToRight
       leftViewHorizondalRightPadding.constant = 0;
       [UIView animateWithDuration:1
           animations:^{
           [self.view layoutIfNeeded]; 
       }];

    }
    else {
    //It's rightToLeft
       rightViewHorizondalRightPadding.constant = 0;
       [UIView animateWithDuration:1
           animations:^{
           [self.view layoutIfNeeded]; 
       }];

    }
}

}

This will make a swipe animation from left to right and right to left.

Hope this helps..

Answer 2

After you create the 2 swipe gesture recognisers you should set their delegates. Then use this delegate method:

UISwipeGestureRecognizer *_swipeLeft;
UISwipeGestureRecognizer *_swipeRight;
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
    static const CGFloat borderWidth = 50.0f;
    if(gestureRecognizer == _swipeLeft) {
        return [gestureRecognizer locationInView:self].x > self.frame.size.width - borderWidth;
    }
    else if(gestureRecognizer == _swipeRight) {
        return [gestureRecognizer locationInView:self].x < borderWidth;
    }
    return YES;
}

Do note that for smooth swiping/dragging you will probably need to use a pan gesture or even long press gesture recogniser rather then the swipe gesture. They are very similar except the long press takes a bit of time to begin (which is settable). If you use them you may still want to use the same delegate method. Or you can simply do all the code in the gestures target method. Try something like this:

CGPoint gestureStartPoint;
- (void)dragFromBoreder:(UIGestureRecognizer *)sender {
    static const CGFloat borderWidth = 50.0f;
    switch (sender.state) {
        case UIGestureRecognizerStateBegan: {
            CGPoint location = [sender locationInView:self];
            if(location.x > borderWidth || location.x < self.frame.size.width-borderWidth) {
                //break the gesture
                sender.enabled = NO;
                sender.enabled = YES;
            }
            else {
                gestureStartPoint = location;
            }
            break;
        }
        case UIGestureRecognizerStateChanged: {
            CGPoint location = [sender locationInView:self];
            CGFloat deltaX = location.x - gestureStartPoint.x;
            UIView *viewToMove;
            CGPoint defaultCenter;
            viewToMove.center = CGPointMake(defaultCenter.x+deltaX, defaultCenter.y);
            break;
        }
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled: {
            CGPoint location = [sender locationInView:self];
            CGFloat deltaX = location.x - gestureStartPoint.x;
            /*
            if(deltaX > someWidth) {
                show the left view
            }
            else if(deltaX < -someWidth) {
                show the right view
            }
            else {
                put everything back the way it was
            }
            */
            break;
        }
        default:
            break;
    }
}

Answer 3

In ios7 there is a gesture recogniser specifically for gestures beginning from the edge of the screen. You should use this.

I can't help with your "smooth" problem, because you haven't said what your current animation looks like or how you are doing it. But a pan gesture, like the one linked, which directly updates view positions, will track the user's movement much more smoothly than a swipe.