CODEWITHSUNDEEP
iosuiviewscrollparallax
H. Wolber
H. Wolber

Reputation: 23

Make IOS Parallax view on vertical scroll

I was wondering if you could help me doing such animations in IOS, I think I need to use an Offset to render the weather on scroll, and maybe use the same Offset to change the height of the 4 views ... Could you help me on this one ?

Screenshot :

Click Here

Here is what I made so far ... : (meanwhile i'm making my weather objects)

CalculSize helps me divide the screen into 4 zones to know that if the finger location is in zone 1 it should display the first view

-(void) calculSize{
   //Calcul of the size of each WeatherView (different for each phone)
   CGRect screenRect = [[UIScreen mainScreen] bounds];
   CGFloat screenHeight = screenRect.size.height;

   // - 67 is the height of my top menu
   _maxSize1 = (screenHeight - 67) / 4;
   NSLog(@"%f", _maxSize1);
   NSLog(@"%f", screenHeight);
}

Then i'm using touchesMoved to get Y position of the finger when it's moving on the screen

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
   //returns Y position
   UITouch *touch = [[event allTouches] anyObject];
   CGPoint location = [touch locationInView:touch.view];
   NSLog(@"Y: %f",location.y);

   //tells me if i'm in the first part etc.
   if (location.y > _maxSize1) {
       _part1 = YES;
       NSLog(@"%d", _part1);
   }
   else if (location.y < _maxSize1){
       _part1 = NO;
       NSLog(@"%d", _part1);
   }

   [NSObject cancelPreviousPerformRequestsWithTarget:self selector:nil object:nil];
}

Upvotes: 0

Views: 572

Answers (1)

Y.Bonafons
Y.Bonafons

Reputation: 2349

Could you please show us what you have already done?

A simple approach is to make your custom "WeatherView" in which you implement method 

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

to catch user interaction and to launch basic animation like

[UIView animateWithDuration:ANIM_DURATION animations:^{
    self.center = CGPointMake(self.center.x, self.center.y + yMove);
}
                 completion:^(BOOL finished) {
                     NSLog(@"anim is finished");
                     [self showLabel:moveToTop];
                     isAnimating = NO;
                 }];

At the end of the animation, I launch a second one to show an UILabel.

On the top of that you need a viewController to manage those custom views, using a custom protocol for exemple.

If you prefer to perform a drag, you can handle it by adding a pan gesture recognizer on your custom view:

UIPanGestureRecognizer* gest = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];

And then to drag the views:

- (void)handlePan:(UIPanGestureRecognizer *)recognizer {

CGPoint translation = [recognizer translationInView:self];
self.center = CGPointMake(self.center.x,
                          self.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self];
}

Upvotes: 1

Related Questions