How to fade in a UIVIew from a specific location in the Main View

Question

My app currently has two modes, a Month view, which displays every date in the month (1->31), and when you click a button, the calendar shifts into a year view with displays of every month. What I'm trying to do is when in year mode, when i click to go back to month mode, I want to load the month view from the current month while fading in from that month.

This is the Month View:

When you click on the top header Bar (September 2015), a year view animates in from the top

Here is the year view:

TLDR: When you click on the top header bar when in month view, I want to load the Year Calendar View and grow that view from the location of the date (in this case September 2nd) that is highlighted in blue. Here is what I have currently

- (IBAction)monthBarTapped:(id)sender
{
    if (_monthBarImageView.highlighted) {
        [self _animateOutYearCalendar:0];
        return;
    }
    _calendarYear = [_calendarStartDate year];

    [self _refreshYearCalendar];

    // animate in year calendar
    _yearCalendarView.hidden = NO;
    [_yearCalendarView setFrameHeight:0];
    self.curMonthView.monthLabel.hidden = YES;

    [UIView beginAnimations:@"animateYearCalendarIn" context:nil];
    [UIView setAnimationDuration:0.5];  // kAnimation_AnimateInDuration];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector (yearCalendarAnimationDidStop:finished:context:)];

    [_yearCalendarView setFrameHeight:_yearFlyoutHeight];

    [UIView commitAnimations];  // start animation

    _monthBarImageView.highlighted = YES;
    [self _refreshMonthButton:NO];
}

- (void)_animateOutYearCalendar:(long)month
{
    [UIView beginAnimations:@"animateYearCalendarOut" context:nil];
    [UIView setAnimationDuration:0.5];  // kAnimation_AnimateInDuration];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector (yearCalendarAnimationDidStop:finished:context:)];

    [_yearCalendarView setFrameHeight:0];
    [UIView commitAnimations];  // start animation

    if (month > 0) {
        // set the new month/year
        if ((month != _calendarStartDate.month) || (_calendarYear != _calendarStartDate.year)) {
            // they changed the date
            NSDateComponents *comps = [_calendar components:NSCalendarUnitMonth | NSCalendarUnitYear fromDate:_calendarStartDate];
            comps.month = month;
            comps.year = _calendarYear;
            _calendarStartDate = [_calendar dateFromComponents:comps];
            [self _refreshDisplay];
        }
    }
}

Basically, I want to know how to to load and grow a view from a specific location, and how to shrink and collapse out a view to a specific location.

Thanks!

You probably want to animate your view's frame from the frame of the button to the full frame of the screen (minus the navigation bar, perhaps). — Aaron, Sep 02 '15 at 21:03

Martin O'Shea · Accepted Answer · 2015-09-02T18:20:07.013

1

If I understand what you are asking you want something like this

_monthView.alpha = 0;
_monthView.frame = button.frame;
        [UIView animateWithDuration:0.5
                              delay:0.0
                            options:UIViewAnimationOptionCurveLinear
                         animations:^{
    // Do all the animations you want in this block
                                 _monthView.frame = CGRectMake(_destination.frame.origin.x,
                                                                               _destination.frame.origin.y,
                                                                               _destination.frame.size.width,
                                                                               _destination.frame.size.height);
// where destination is where you want to animate to
                                 _monthView.alpha = 1.0;

                             }
                             completion:^{
    //call what ever method you want when animation finishes
                             }];

edited Sep 02 '15 at 18:20

answered Sep 02 '15 at 17:48

Martin O'Shea

432
5
15

What does the 400 mean? – Varun Varahabotla Sep 02 '15 at 18:06
Sorry, just an example if you want to move the view 400 points to the right. – Martin O'Shea Sep 02 '15 at 18:09
This doesn't really do what I want it to do. This just shifts the entire frame 400 pixels to the right. I'm trying to load a view from a specific frame, which is the button's frame! Thanks for the attempt though – Varun Varahabotla Sep 02 '15 at 18:14
Ok I edited the question, it now animates from the frame of the button to the destination (where you want it to be when it stops animating). This should be the desired effect. – Martin O'Shea Sep 02 '15 at 18:22
Is this meant to animate from the year view to the month view or the month view to the year view? – Varun Varahabotla Sep 02 '15 at 18:31
Varun looking at your question again, I do believe what I put above should help. I think I may see where your confusion is coming from, if you were exchange "_yearView" for where I have "_monthView" above. And the September 2 button was used for the button variable you should see your "_yearView" expand from the button while also also changing from transparent to solid. You need to use the size of the view that is the space under neat your top bar to set the "_destination" view, so the "_yearView" knows how large to expand to. – Martin O'Shea Sep 02 '15 at 21:20
How would I make it so the view doesn't go on top of the top bar? Thanks, it's pretty much correct, i'll mark it correct shortly – Varun Varahabotla Sep 03 '15 at 17:24
I depends when it is going over the bar. If it is at the start of the animation then if the _yearView and the bar are subview of the same view (i.e they share a parent view) do [_parentView bringSubviewToFront:_topBarView]. If the problem is that the _yearView is on top at the end of the animation then I say you need to take into account the height of the _topBarView when you set the _yearView's frame in the animation block – Martin O'Shea Sep 03 '15 at 17:53

score 1 · Answer 2 · answered Sep 02 '15 at 19:52

If I understand your question correctly, you wanted to animate the adding and removing of two views that have the identical frames (locations).

Let's say you have two views: view1 and view2 with the same origin and size. Try this:

[UIView transitionWithView:self.view
                  duration:0.4  // animation duration - change this if you like
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    [self.view addSubview:view1];  // view1 is the view you wanted to show
                }
                completion:^(BOOL finished) {
                    [view2 removeFromSuperview];  //view2 is the view you want to hide
                }];

The above is for adding view1 (show) and removing view2 (hide). You can make changed to do the other way.

Check the edited question for more clarity! I think there is still some misunderstanding on what has to be done. — Varun Varahabotla, Sep 02 '15 at 20:49

How to fade in a UIVIew from a specific location in the Main View

2 Answers2