UIScrollView with fadeIn/fadeOut effect

Question

I've scrollview with page control and I want to make the subview of my scrollview fadeIn/fadeOut when I scroll to or from the next page. I found that I can use contentOffset to make this effect but I couldn't make it. In fact, I'm newbie and I wish If there is any tutorial that can help. thank you.

Answer 1

Assuming you hold an array of your view controllers in self.viewControllers indexed according to the UIPageControl:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{

    CGFloat diffFromCenter = ABS(scrollView.contentOffset.x - (self.pageControl.currentPage)*self.view.frame.size.width);
    CGFloat currentPageAlpha = 1.0 - diffFromCenter/self.view.frame.size.width;
    CGFloat sidePagesAlpha = diffFromCenter/self.view.frame.size.width;

    //NSLog(@"%f",currentPageAlpha);

    [[[self.viewControllers objectAtIndex:self.pageControl.currentPage] view] setAlpha:currentPageAlpha];

    if (self.pageControl.currentPage > 0)
        [[[self.viewControllers objectAtIndex:self.pageControl.currentPage-1] view] setAlpha:sidePagesAlpha];

    if (self.pageControl.currentPage < [self.viewControllers count]-1)
        [[[self.viewControllers objectAtIndex:self.pageControl.currentPage+1] view] setAlpha:sidePagesAlpha];

}

Answer 2

You might check out this tutorial on view animation:

Uiview-tutorial-for-ios-how-to-use-uiview-animation

To achieve the effect you are looking for you can use something like this:

ScrollView delegate method to detect scrolling (if your only paging)

   -(void)scrollViewDidScroll:(UIScrollView *)scrollView
   {
        UIView* subView = [scrollView.subviews lastObject]; //Or however you access your subview

        [UIView animateWithDuration:1.0f animations:^{
            subView.alpha = 0.0f;
        } completion:^(BOOL finished){
            [UIView animateWithDuration:1.0f animations:^{
               subView.alpha = 1.0f; 
            }]; 
        }];
   }

This will cause your subview to smoothly fade out and in within the span of 2.0 seconds. You should a bit of reading about this animation blocks though as they can be a little tricky. For instance I had nest the second animation block after the first had complete because the actual code within them is handled immediately and the animation simply takes place on the View side of things.

Hope this helps!

Answer 3

You can fade it to zero, change the contentOffset without animation, and fade it back to alpha with 1.0:

- (IBAction)didChangePageView:(id)sender
{
    [UIView animateWithDuration:0.25
                     animations:^{
                         self.scrollView.alpha = 0.0;
                     }
                     completion:^(BOOL finished) {
                         [self.scrollView setContentOffset:CGPointMake(0, self.scrollView.frame.size.height * self.pageViewControl.currentPage) animated:NO];

                         [UIView animateWithDuration:0.25 animations:^{
                             self.scrollView.alpha = 1.0;
                         }];
                     }];
}

Answer 4

With Swift 2.0, assuming you hold an array of your subViews in myViewsArray:

func scrollViewDidScroll(scrollView: UIScrollView) {
    //Fade in/out effect while scrolling
    for (index,subView) in myViewsArray.enumerate() {
        label.alpha = 1 - abs(abs(scrollView.contentOffset.x) - subView.frame.width * CGFloat(index)) / subView.frame.width
    }
}