我正在尝试在他们的 iOS 应用程序上复制 eBay 的列表菜单，用户可以在其中滚动浏览列表的不同图像。我注意到背景颜色是纯色，它复制了每张图像中背景的环绕色。

当我滚动浏览具有不同环绕背景的不同图像(不同页面)时，UICollectionView 的实际背景发生变化以某种方式反射(reflect)它。

我的意思是:

如您在第一张图片中所见，背景是浅色，有点像图片的背景。当我滚动到第二张图片的一半时，背景变暗了。

最后:

我的设置类似:

使用 DominantColor ，我能够使用每个 UIImage 的主色设置 UICollectionView 的背景色。当用户在第一页和第二页之间滚动一半时，UICollectionView 背景色设置为第二页 UIImage 的主色。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as UICollectionViewCell

    let frame: CGRect = CGRect(x: 0, y: 0, width: imagesView.frame.size.width, height: imagesView.frame.size.height)

    let subView: UIImageView = UIImageView(frame: frame)

    subView.image = imagesArray[indexPath.row].image

    subView.contentMode = UIViewContentMode.scaleAspectFit

    if colorsArray.count > 0
    {
        // Set background dominant color of first image
        collectionView.backgroundColor = colorsArray[0]
    }

    cell.addSubview(subView)

    return cell
}

func scrollViewDidScroll(_ scrollView: UIScrollView)
{
    let scrollValue = (scrollView.contentOffset.x / UIScreen.main.bounds.width)

    let pageWidth: CGFloat = imagesCollectionView.bounds.size.width

    let currentPage: Int = Int( floor( (imagesCollectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1)

    if scrollValue != 1
    {
        UIView.animate(withDuration: 1, animations: {

            self.imagesCollectionView.backgroundColor = self.colorsArray[currentPage]

        })

    }
    else
    {
        UIView.animate(withDuration: 1, animations: {

            self.imagesCollectionView.backgroundColor = self.colorsArray[currentPage]

        })

    }
}

但是，我很难理解如何在用户开始滚动时尽快从当前背景颜色缓慢过渡到下一个背景颜色，如上图 2 所示。

目前在scrollViewDidScroll中实现方式如上，当页面在下一页之间滚动到一半时开始淡入下一个颜色，并且有1秒动画，无论下一页显示到一半还是全部显示，都会在1秒内变为该颜色。

我怎样才能做到这一点？

最佳答案

使用 Fogmeister在 obj-C 和 user3344977 中的答案很好地将它转换为 Swift，以及 Tonton的指导，我想出了解决办法:

func scrollViewDidScroll(_ scrollView: UIScrollView)
{
    let pageWidth: CGFloat = imagesCollectionView.bounds.size.width
    let currentPage: Int = Int( floor( (imagesCollectionView.contentOffset.x - pageWidth / 2) / pageWidth) + 1)

    let maximumHorizontalOffset: CGFloat = scrollView.contentSize.width - scrollView.frame.size.width
    let currentHorizontalOffset: CGFloat = scrollView.contentOffset.x

    let percentageHorizontalOffset: CGFloat = currentHorizontalOffset / maximumHorizontalOffset

    if percentageHorizontalOffset < 0.5
    {
        imagesCollectionView.backgroundColor = fadeFromColor(fromColor: colorsArray[currentPage], toColor: colorsArray[currentPage + 1], withPercentage: percentageHorizontalOffset)
    }
    else
    {
        imagesCollectionView.backgroundColor = fadeFromColor(fromColor: colorsArray[currentPage - 1], toColor: colorsArray[currentPage], withPercentage: percentageHorizontalOffset)
    }
}

func fadeFromColor(fromColor: UIColor, toColor: UIColor, withPercentage: CGFloat) -> UIColor
{
    var fromRed: CGFloat = 0.0
    var fromGreen: CGFloat = 0.0
    var fromBlue: CGFloat = 0.0
    var fromAlpha: CGFloat = 0.0

    // Get the RGBA values from the colours
    fromColor.getRed(&fromRed, green: &fromGreen, blue: &fromBlue, alpha: &fromAlpha)

    var toRed: CGFloat = 0.0
    var toGreen: CGFloat = 0.0
    var toBlue: CGFloat = 0.0
    var toAlpha: CGFloat = 0.0

    toColor.getRed(&toRed, green: &toGreen, blue: &toBlue, alpha: &toAlpha)

    // Calculate the actual RGBA values of the fade colour
    let red = (toRed - fromRed) * withPercentage + fromRed;
    let green = (toGreen - fromGreen) * withPercentage + fromGreen;
    let blue = (toBlue - fromBlue) * withPercentage + fromBlue;
    let alpha = (toAlpha - fromAlpha) * withPercentage + fromAlpha;

    // Return the fade colour
    return UIColor(red: red, green: green, blue: blue, alpha: alpha)
}

现在，当用户开始滚动到下一页/上一页时，由于 percentageHorizo​​ntalOffset 中的颜色 alpha 变化，背景颜色将缓慢变化。

感谢所有提到的!

关于ios - 当用户滚动到不同的页面时，如何在 `UICollectionView` 的不同背景颜色之间淡入淡出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41215206/