CODEWITHSUNDEEP
ipaduiviewcore-animationtransition
jowie
jowie

Reputation: 8068

How to cross-fade a UIScrollView back to the beginning

I have a horizontally-scrolling paging UIScrollView in an iPad app, containing lots of pages. On the last page, I tap on a button on the screen to reset back to page 1. I would like to be able to cross-dissolve this transition, but it doesn't seem to work:

[UIView transitionWithView:self.view duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
    pagingScrollView.contentOffset = CGPointZero;
} completion:^(BOOL finished) {
    [self refreshPages];
}];

I read that adding UIViewAnimationOptionAllowAnimatedContent will allow all content to transition, but it doesn't work. Instead, the screen cross-dissolves to the background colour, and when the transition is complete, the first page just appears.

Upvotes: 1

Views: 2061

Answers (1)

meronix
meronix

Reputation: 6176

you cannot fade-out a UIView (the scroller) AND simultaneously fade-in the same view...

you could just using different UIViews...

what you can do is:

1) fadeOut the scroller in the current position (to the backGround)

2) while the scroller is invisible, move it to the right position (with no animation)

3) fadeIn the scroller from the backGround

something like:

// START FIRST PART OF ANIMATION
[UIView animateWithDuration:0.5 delay:0.0 options: options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
    pagingScrollView.alpha = 0;


} completion:^(BOOL finished) {

// FIRST PART ENDED
// MOVE SCROLLER (no animation)
    pagingScrollView.contentOffset = CGPointZero;

// START SECOND PART OF ANIMATION
[UIView animateWithDuration:0.5 delay:0.0 options: options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
// fadeIn - animated
    pagingScrollView.alpha = 1;
} completion:^(BOOL finished) {

// ANIMATION ENDED
    [self refreshPages];
}];



}];

NEW EDIT:

thanks to amadour, who taught me something with his comments,

i hope he could add an answer of his own, i would vote for him

anyway, to answer to jowie original question:

i got the right animation just moving the contentOffset setting out of the animation block, and removing UIViewAnimationOptionAllowAnimatedContent (not really needed), and passing pagingScrollView as parameter for transitionWithView

this worked for me:

    pagingScrollView.contentOffset = CGPointZero;
    [UIView transitionWithView:pagingScrollView duration:3.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
//        pagingScrollView.contentOffset = CGPointZero; // move up, outside of animation block
    } completion:^(BOOL finished) {
        NSLog(@"-->> END amimation");
        [self refreshPages];
    }];

Upvotes: 7

Related Questions