带有淡入淡出效果的UIScrollView

Question

我有一个带有页面控制器的滚动视图，当我滚动到下一页或上一页时，我想让我的滚动视图的子视图淡入/淡出。我发现可以使用contentOffset来实现这个效果，但我无法做到。 事实上，我是新手，希望有任何教程可以帮助我。谢谢。

- BandarAljahmi

Answer 1

假设你在self.viewControllers中持有一个按照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];

}

- AmitP

Answer 2

在Swift 2.0中，假设您将子视图数组保存在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
    }
}

- RaphRaph

Answer 3

你可以看一下关于视图动画的教程：Uiview-tutorial-for-ios-how-to-use-uiview-animation 为了实现你想要的效果，你可以使用类似这样的方法：

使用ScrollView的委托方法来检测滚动（如果你只是分页）。

   -(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; 
            }]; 
        }];
   }

这将使你的子视图在2.0秒内平滑地淡出和淡入。你应该多读一些关于这个动画块的内容，因为它们可能有点棘手。例如，我必须在第一个动画块完成后嵌套第二个动画块，因为它们内部的实际代码会立即处理，而动画只是在视图方面发生。

希望这可以帮助到你！

- mdewitt

---

谢谢你，Michael！我之前尝试过动画块，但似乎需要在alpha和ContentOffset之间建立逻辑关系，因为滚动时动画块会重复。 - BandarAljahmi

Answer 4

您可以将其淡化为零，无需动画即可更改contentOffset，然后将其淡回alpha为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;
                         }];
                     }];
}

- Rob

---

谢谢Rob的回答，但我发现使用animateWithDuration时，在滚动时淡入/淡出会重复。 - BandarAljahmi

@BandarAljahmi 很好。我以为你是在回应UIPageControl值的变化，从滚动视图的一个“页面”淡出并淡入到另一个页面。我可能误解了问题。 - Rob