How To Implement Drag-down Animation Using Thumb Drag Direction in Mobile Applications?

0
Shares
How To Implement Drag-down Animation Using Thumb Drag Direction in Mobile Applications?
2.7 (53.33%) 3 votes

Good design is noticeable and great design is invisible” – The same principle applies to mobile app development with animation.

Having a great animation makes your application user-friendly and catches more attention of the users. The animation should have the logic of an app, otherwise, it distracts users from the app itself.

Sometimes, developers unable to find proper idea about how to create a good animation for their applications. Thus, here we have shown one example of good drag-down animation using thumb drag direction.

Objective:

To implement drag-down animation using thumb drag direction in mobile applications

The Animation Type

We have an animation on the ‘Browse’ screen of the application. If users drag the thumb ticker, the ticker moves in the direction of thumb and users will see the filter view come behind the top navigation bar. At the same time, users also will see the small full-width view at the bottom of the screen in the reverse direction of the full filter view.

In ViewController’s .h file add the below code segment:

// this is the height constraint of the menuview, here it is set to -422 because I only want to display around 55 pixels of the view on the screen. When menuview is in normal position.

#define VIEW_HEIGHT_CONSTRAINT -422

// this is the bottom constraint of the bottomview, it is set to 49 in this example cause I want the bottom view of the exact height of tab bar.

#define BOTTOM_Y_CONSTRAINT 49

// set y position, when menuview reaches at this position in the screen at the same time start showing or hiding bottom view

#define SHOW_BOTTOM_VIEW_AFTERHEIGHT  150

@interface ViewController : UIViewController

 

 {
CGPoint _origin;
// pangesture recogniser for a view which we want to animate
UIPanGestureRecognizer *panGestureRecognizer ;
}

 

@property (nonatomic, strong) IBOutlet UIView *menuView;

//height constraint of the view

@property (strong, nonatomic) IBOutlet NSLayoutConstraint *filterViewHeightConstraint;

//Bottom constraint of the view that is coming from reverse direction of thumb drag

@property (strong, nonatomic) IBOutlet NSLayoutConstraint *bottomViewBottomConstraint;

@end

In ViewController’s .m file in viewDidLoad method define below elements

- (void)viewDidLoad {
panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
// assign the pan gesture recogniser to the menuview  
 [self.menuView setUserInteractionEnabled:YES];
	[self.menuView addGestureRecognizer:panGestureRecognizer];
}

Now define the pangesture method on the view.

// drag the view in up or down direction using your finger

-(void)handlePan:(UIPanGestureRecognizer *)pan
{
	
	CGPoint translation = [pan translationInView:self.menuView];
	CGPoint velocity = [pan velocityInView:self.menuView];
 	
	switch (pan.state) {
        	
    	case UIGestureRecognizerStateBegan:
    	{
             	// get the current frame of the menuview to determine the direction
        	_origin = self.menuView.frame.origin;
    	}
            
        	break;
    	case UIGestureRecognizerStateChanged:
    	{
        	if (_origin.y + translation.y <= 0) { if(self.menuView.frame.origin.y != CGPointZero.y) { self.menuView.transform = CGAffineTransformMakeTranslation(0, translation.y); } } // if menuview is coming down and reaches at certain y position in the screen start showing the bottom view from the bottom of the screen if (self.menuView.frame.origin.y >= -SHOW_BOTTOM_VIEW_AFTERHEIGHT) {  	
            	if (self.bottomViewBottomConstraint.constant > -BOTTOM_Y_CONSTRAINT){
                	self.bottomViewBottomConstraint.constant += -1;
          	  }
        	}
             	// if menuview is going up and reaches at certain y position in the screen start hiding the bottom view
        	else if (self.menuView.frame.origin.y <= -SHOW_BOTTOM_VIEW_AFTERHEIGHT) {
            	if (self.bottomViewBottomConstraint.constant <= 0){ self.bottomViewBottomConstraint.constant += 1; } } [self.view layoutIfNeeded]; } break; case UIGestureRecognizerStateEnded: case UIGestureRecognizerStateCancelled: { // Check the direction of the view drag, up or down CGPoint finalOrigin = CGPointZero; if (velocity.y >= 0) {
            	isDown = YES;
            	finalOrigin.y = 0;
        	}
        	else
        	{
            	isDown = NO;
            	finalOrigin.y =  VIEW_HEIGHT_CONSTRAINT;
        	}
        	
        	CGRect tempMenuFrame = self.menuView.frame;
 	       tempMenuFrame.origin = finalOrigin;
             	
             	 // give the animation type which best suits your need, here the animation style is CurveEaseOut to have the effect like its coming from top.
        	[UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionCurveEaseOut
                         	animations:^{
                             	self.menuView.transform = CGAffineTransformIdentity;
                             	self.menuView.frame = tempMenuFrame;
                          	
                             	if(isDown)
                                 	_filterViewHeightConstraint.constant = 0;                             	
                             	else
                                 	_filterViewHeightConstraint.constant = VIEW_HEIGHT_CONSTRAINT;
 
                            	       	[self.view layoutIfNeeded];
                                 	[self bottomShowcaseAnimation];
 
                         	} completion:^(BOOL finished) {
                            	// write the code you want to perform after completion of the animation.
                         	}];
    	}
        	break;
        	
    	default:
        	break;
	}
}

 

view from top

Above function is useful to drag the view from top to bottom and bottom to top. One can use the above piece of code individually if they have only one animation to show the view from top to bottom.

To animate the view bottom view below function need to use.

-(void)bottomShowcaseAnimation{
	//if menuview reached half of its height then only start showing bottom view
	if (self.menuView.frame.origin.y >= -(self.view.frame.size.height/2)){
    	if (self.bottomViewBottomConstraint.constant > -BOTTOM_Y_CONSTRAINT){
        	
        	[UIView animateWithDuration:0.5 animations:^{
            	self.bottomViewBottomConstraint.constant = -BOTTOM_Y_CONSTRAINT;
        	}];
    	}
	}
 //if menuview dragged upside then only start hiding bottom view
	else if (self.menuView.frame.origin.y <= -SHOW_BOTTOM_VIEW_AFTERHEIGHT){
    	if (self.bottomViewBottomConstraint.constant <= 0){
        	[UIView animateWithDuration:0.5 animations:^{
            	self.bottomViewBottomConstraint.constant = 0;
        	}];
    	}
	}
             	[self.view layoutIfNeeded];
}

view from bottom

If you still have any confusion in the code, do share it in the comment section. Our developers will answer you as soon as possible.

This page was last edited on July 4th, 2018, at 4:20.
 
0
Shares
 

Have an App Idea?

Get your free consultation now