Fade in/out UIScrollView's content like Mobile Safari does in its tab

Question

NOTE: I added my new solution at the UPDATE answer below.

I try to recreate the effects we saw in Mobile Safari\'s tab on iPhone/iPod touch.

Ba

Answer 1

UPDATE

I came up with another way to update alpha value of each page. When creating content view, I use KVO to addObserver with UIScrollView's contentOffset:

[self.scrollView addObserver:[self.contentViews objectAtIndex:i] 
                  forKeyPath:@"contentOffset" 
                     options:NSKeyValueObservingOptionNew
                     context:@selector(updateAlpha:)];

So that each of my contentViews will get the message when contentOffset changed:

- (void)observeValueForKeyPath:(NSString *)keyPath 
                      ofObject:(id)object 
                        change:(NSDictionary *)change 
                       context:(void *)context {
    [self performSelector:(SEL)context withObject:change];
}

And my contentViews can do the calculation and animate by themselves when scrolling:

- (void)updateAlpha:(NSDictionary *)change {
    CGFloat offset = [[change objectForKey:NSKeyValueChangeNewKey] CGPointValue].x;
    CGFloat origin = [self frame].origin.x;
    CGFloat delta = fabs(origin - offset);

    [UIView beginAnimations:@"Fading" context:nil];
    if (delta < [self frame].size.width) {
        self.alpha = 1 - delta/self.frame.size.width*0.7;
    } else {
        self.alpha = 0.3;
    }
    [UIView commitAnimations];
}

Of course, you will need to remove the observer when you remove the content view from superview, and add them again when new content view created.

Hope this help to those who want to do the same.