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

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.


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.


// 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.


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


@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;


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;
    	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;
            	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
                             	self.menuView.transform = CGAffineTransformIdentity;
                             	self.menuView.frame = tempMenuFrame;
                                 	_filterViewHeightConstraint.constant = 0;                             	
                                 	_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.


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.

	//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.

You may also like,

This page was last edited on April 14th, 2020, at 1:32.


Have an App Idea?

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Your Free Quote