Question

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

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

这就是我的意思：

正如您在第一张照片中看到的那样，背景是浅色，有点像图像的背景。当我向中间滚动到第二张照片时，背景变暗。

最后：

我的设置类似：

使用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]

        })

    }
}

但是，当用户开始滚动时，我很难将如何从当前背景颜色慢慢转换为下一个背景颜色很快，如第二张图片所示上方。

目前在scrollViewDidScroll中实现的方式，当页面在下一页之间中途滚动并且 1秒动画，无论下一页是中途还是完全显示，它都会在1秒内变成该颜色。

我怎样才能做到这一点？

Answer 1

在obj-C中使用Fogmeister的答案，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)
}

现在，当用户开始滚动到下一个/上一页时，由于percentageHorizontalOffset中的颜色变化，背景颜色会慢慢变化。

感谢所有提到的！

Answer 2

如果颜色的变化需要与滚动同步，即逐渐改变颜色，您可能希望使用collectionView中的scrollview来更改scrollViewDidScroll

通过获得2个背景图像颜色（也许使用Mike JS Choi的答案），您可以比较它们的差异。使用从0到1的滚动值，您可以逐渐更改颜色。

使用一些局部变量让方法知道您当前的图像是什么

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

    guard let nextColor: UIColor? = getBackgroundColor(from: nextImage) else { return }

    let currentImage = getBackgroundColor(from: currentImage)

    let currentIndex = pageControl.currentPage

    if scrollValue != 0 {
        backgroundColor = colorDifference(current: currentColor, next: nextColor, transitionValue: abs(scrollValue))
    } else {
        backgroundColor = nextColor
    }
}

func colorDifference(current: UIColor, next: UIColor, transitionValue: Int) -> UIColor {
    var currentRed: Float = 0
    var currentGreen: Float = 0
    var currentBlue: Float = 0
    var currentAlpha: Float = 0
    current.getRed(&currentRed, green: &currentGreen, blue: &currentBlue, alpha: &currentAlpha)

    var nextRed: Float = 0
    var nextGreen: Float = 0
    var nextBlue: Float = 0
    var nextAlpha: Float = 0
    next.getRed(&nextRed, green: &nextGreen, blue: &nextBlue, alpha: &nextAlpha)

    let finalRed = (nextRed - currentRed) * transitionValue
    let finalGreen = (nextGreen - currentGreen) * transitionValue
    let finalBlue = (nextBlue - currentBlue) * transitionValue
    let finalAlpha = (nextAlpha - currentAlpha) * transitionValue

    let finalColor = UIColor(colorLiteralRed: finalRed, green: finalGreen, blue: finalBlue, alpha: finalAlpha)
    return finalColor
}

因此，您必须弄清楚如何存储当前图像并获取下一个图像（您可以向前和向后滚动），然后使用scrollViewDidScroll方法中的图像。 glhf fam

Answer 3

棘手的部分是找到与每张图片相对应的颜色。我曾经使用过TDImageColors，效果很好：https://www.cocoacontrols.com/controls/tdimagecolors

然后你要做的就是从一种颜色过渡到另一种颜色。和@Tonton一样回答。

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

3 个答案: