CODEWITHSUNDEEP
iosiphoneios7uianimation
pa12
pa12

Reputation: 1503

could not figure out uiview transitions used in yahoo weather app

I was trying to mimic the yahoo weather app screen transition between cities, I couldn't figure out what transition it is. Any clue?

I really appreciate you time. Thanks

Edit:

I have slideView ctrler which has a subview. The sliderview has an image and the subview has text. When I make a swipe, the text view with text must be moving and dragging way the view ctrler with it at a slower rate and this intern should start dragging in the next view ctrler which is an instance of slider Ctrler.

Upvotes: 0

Views: 458

Answers (2)

Rob
Rob

Reputation: 437552

There is no built-in transition that does this for you (I assume you're talking about the images that are transitioning their frame/center at a different rate than the view itself). You'd probably have to write it yourself. Some basic familiarity with gesture recognizers and view animation is needed.

The basic effect is by simultaneously adjusting the center property for two image views as you change the frame of those views (or their super views). (Or, you can achieve this by having image views whose contentMode is UIViewContentModeCenter and just changing the frame.) I'd suggest you start with some simple tests of the effect and build from there.

For example, I created a scene that has two image views, whose autolayout constraints were defined as follows:

H:|[leftImageView][rightImageView]|
V:|[leftImageView]|
V:|[rightImageView]|

I then defined a width constraint for the leftImageView, and hooked it up to an IBOutlet for that constraint, e.g. leftImageWidthConstraint. I then have a UIPanGestureRecognizer that could handle the gesture, simply changing this leftImageWidthConstraint accordingly (and with auto layout, the rest of the frame is calculated automatically for me from that):

- (void)handlePan:(UIPanGestureRecognizer *)gesture
{
    CGPoint translate = [gesture translationInView:gesture.view];
    static CGFloat width;

    if (gesture.state == UIGestureRecognizerStateBegan)
    {
        width = self.leftImageWidthConstraint.constant;
    }

    CGFloat newWidth = width + translate.x;

    if (newWidth < 0)
        newWidth = 0;
    else if (newWidth > self.view.bounds.size.width)
        newWidth = self.view.bounds.size.width;

    self.leftImageWidthConstraint.constant = newWidth;

    // if you let go, animate the views to their final position

    if (gesture.state == UIGestureRecognizerStateEnded)
    {
        // if more than half way, set left view's target width to take up full width, 
        // otherwise set left view's target width to zero

        if (newWidth > (self.view.bounds.size.width / 2.0))
            newWidth = self.view.bounds.size.width;
        else
            newWidth = 0;

        // animate the changing of the constraint (and thus the `frame`) accordingly

        self.leftImageWidthConstraint.constant = newWidth;
        [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            [self.view layoutIfNeeded];
        } completion:nil];
    }
}

Thus, as I pan across, the two images are centered within their clipped frames:

enter image description here

This is a very basic implementation of the idea. There are, though, a ton of implementation details (custom container vs subviews, autolayout vs not, etc.), so until you answer some of those questions, it's going to be hard to be more specific.

Upvotes: 1

Aditya Deshmane
Aditya Deshmane

Reputation: 4722

It is not default but i achieved similar to it in my old app

  1. Register gesture on your view and on detection set isFromLeftSide accordingly

  2. Call following. do fine tune this as per your requirements

     [self.view addSubview:mySlidingView];
        mySlidingView.frame = // set offscreen frame, in the direction you want it to appear from depending on flag isFromLeftSide
        [UIView animateWithDuration:8.0 
                         animations:^{
                             mySlidingView.frame = // desired end location
                                }];

Upvotes: 0

Related Questions