UIScrollView with fadeIn / fadeOut effect

Question

I have a scrollview with page control and I want to subview my scrollview fadeIn / fadeOut when I go to the next page or from the next page. I found that I can use contentOffset to make this effect, but I could not do it. Actually, I am a beginner, and I want if there is any tutorial that can help. thanks.

Answer 1

Assuming you keep an array of your view controllers in self.viewControllers indexed according to 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 can check out this tutorial for an animation of the form:

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

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

ScrollView delegation method for scroll detection (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 lead to a smooth disappearance of your spy and in the interval of 2.0 seconds. You should read a little about these blocks of animation, although they can be a bit complicated. For example, I had a nest of the second block of animation after the first completion, because the actual code inside them is processed immediately, and the animation just happens on the side of the view.

Hope this helps!

Answer 3

You can output it to zero, change the contentOffset without animation and return it to alpha from 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 are holding an array of your subspecies 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 } }