滚动多个屏幕时根据 UIScrollView 的 contentOffset.x 更改视图的 alpha

Posted 2023-03-13

【中文标题】滚动多个屏幕时根据 UIScrollView 的 contentOffset.x 更改视图的 alpha

【英文标题】：Changing view's alpha based on UIScrollView's contentOffset.x when scrolling multiple screens

【发布时间】：2015-08-28 19:30:31

【问题描述】：

我有一个横向的UIScrollView，宽度为960。

UIScrollView 包含 3 个UIView's，每个都设置为背景颜色。

第一个是粉红色，第二个是蓝色，第三个是绿色。

我需要做的是根据用户滚动更改颜色（视图）的 alpha。

因此，如果用户在第一个屏幕（粉红色）并开始滚动到第二个页面（蓝色），那么粉红色应该会开始褪色，蓝色会变得更加明显，并且一旦用户完全滑动到该页面第二页全是蓝色的。

当我只使用一个 UIView 时，我是这样做的：

func scrollViewDidScroll(scrollView: UIScrollView) 

        // Offset Percentage
        var percentageHorizontalOffset = scrollView.contentOffset.x / 320;

        // Reduce alpha
        pinkView.alpha = percentageHorizontalOffset

这很容易，因为百分比从 0.0 变为 1.0

但是，我需要修改代码以支持 3 个屏幕。我之前尝试过在上述方法中将320 替换为960，但这会导致一些问题。

首先，您不再获得 0.0 到 1.0 范围内的百分比，一旦您在第二页滚动，它将是 1.0 到 2.0 的范围，这无法帮助我正确修改 alpha。

第二个是alpha变化感觉不是很流畅，尤其是UIScrollView快速滑动的时候。我之前设置了一堆 if 语句试图让它工作但没有任何工作。

当我的UIScrollView's 内容大小大于一个屏幕时，如何根据contentOffset.x 正确淡化所有 3 个UIView's 的 alpha？

【参考方案1】：

最简单的方法是将 3 个彩色视图视为一个数组。

// Put all your views in an array
@property NSArray *coloredViews;

// Later where you set things up, allocate the array.
coloredViews=@[pinkView,blueView,greenView];

然后使用以下算法来设置 alpha。 这假设一次在屏幕上只有 N 个视图中的 2 个。一个在左边，一个在右边。 左边的阿尔法是基于它在屏幕外的数量。 右边的阿尔法是基于它在屏幕上的数量。 因此，当左侧熄灭时，它会变为 0，导致右侧变为 1，反之亦然。

这使你的滚动方法：

func scrollViewDidScroll(scrollView: UIScrollView) 
  // Work out which view is showing on the left. 0 to N-1
  // Based on each being 320 wide.
  CGFloat offset=scrollView.contentOffset.x;
  NSUInteger leftHandSideViewIndex=(NSUInteger)offset.x/320;

  // Left hand side alpha is 1 minus percentage (as a fraction) off screen
  self.coloredViews[leftHandSide].alpha = 
    1.0 - (offset - (320.0 * leftHandSideViewIndex))/320.0;

  // Right hand side alpha is 1 - percentage (as a fraction) on screen
  // Only do this if there is a right hand side.
  if (leftHandSideViewIndex < self.coloredViews.count-1)
    self.coloredViews[leftHandSide+1].alpha = 
      1.0 - ((320.0 * leftHandSizeViewIndex+1)-offset)/320.0;
  

试一试。可能不是 100% 正确，但希望能给你这个想法。你可能想要设置一个宽度变量而不是使用 320.0。