当用户滚动到不同的页面时，如何在“UICollectionView”的不同背景颜色之间淡入淡出？

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

当我滚动浏览具有不同环绕背景的不同图像（不同页面）时，实际背景UICollectionView改变以某种方式反映它。

这就是我的意思：

正如您在第一张图片中看到的，背景是浅色的，有点类似于图像的背景。当我滚动到第二张图片的一半时，背景变暗。

Finally:

我的设置类似：

Using 主色 https://github.com/indragiek/DominantColor，我能够设置UICollectionView每个的背景颜色UIImage的主色。当用户在第一页和第二页之间滚动一半时，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]

        })

    }
}

但是，我在如何缓慢地从当前背景颜色过渡到下一个背景颜色方面遇到了困难soon当用户开始滚动时，如上面的第二张图所示。

目前的实现方式如上scrollViewDidScroll，当页面在下一页之间滚动一半时，它开始淡入下一种颜色，并且带有1 second动画，无论下一页是显示一半还是完全显示，它都会在 1 秒内变成该颜色。

我怎样才能实现这个目标？

Using 雾大师 https://stackoverflow.com/a/32260832/2373410obj-C 中的答案和用户3344977 https://stackoverflow.com/a/32261089/2373410很好地将它转换为 Swift，以及Tonton https://stackoverflow.com/a/41216632/2373410在老师的指导下，我找到了解决办法：

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)
}

现在，当用户开始滚动到下一页/上一页时，背景颜色将由于颜色 alpha 变化而缓慢变化percentageHorizontalOffset.

感谢所有提到的人！