当用户滚动到不同的页面时，如何在“UICollectionView"的不同背景颜色之间淡入淡出? [英] How to fade between different background colors of a `UICollectionView` as the user scrolls to a different page?
问题描述
我正在尝试在他们的 iOS 应用程序上复制 eBay 的列表菜单，用户可以在其中滚动浏览列表的不同图像.我注意到背景颜色是一种纯色，它复制了每个图像中背景的环绕色.
I'm trying to replicate eBay's listing menu on their iOS app in which users can scroll through different images of a listing. I noticed that the background color is a solid color that replicates the surround colors of the background in each image.
当我滚动浏览具有不同环绕背景的不同图像(不同页面)时，UICollectionView 的实际背景会发生变化，以某种方式反映它.
As I scroll through a different image (different page) with a different surround background, the actual background of the UICollectionView changes to somehow reflect it.
我的意思是:
正如您在第一张图片中看到的，背景是浅色，有点像图片的背景.当我滚动到第二张图片的一半时，背景变暗了.
As you can see in the first picture, the background is a light color, somewhat resembling the image's background. As I scroll halfway to the 2nd picture, the background turns darker.
最后:
我的设置类似:
使用 DominantColor，我能够设置 UICollectionView背景颜色与每个 UIImage 的主色.当用户在第一页和第二页之间滚动到一半时，UICollectionView 背景颜色设置为第二页 UIImage 的主色.
Using DominantColor, I was able to set the UICollectionView's background color with each UIImage's dominant color. As the user scrolls half-way between the first and second page, the UICollectionView background color is set the 2nd page UIImage's dominant color.
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 所示.
However, I'm having a difficult time on how to slowly transition from the current background color to the next background color as soon as the user starts scrolling, as seen in the 2nd picture above.
目前在scrollViewDidScroll中实现的方式，当页面在下一页之间滚动到一半时，它开始淡入下一种颜色，并有1秒 动画，无论下一页是显示一半还是完全显示，它都会在 1 秒内变成那个颜色.
The way it is currently implemented as above in scrollViewDidScroll, it starts to fade into the next color when the page is half-way scrolled between the next page, and with a 1 second animation, it will become that color within 1 second, regardless of if the next page is half-way or fully shown.
我怎样才能做到这一点?
How can I achieve this?
推荐答案
在 obj-C 中使用 Fogmeister 的答案和 user3344977 很好地将其转换为 Swift，以及 Tonton 的指导下，我想出了解决方案:
Using Fogmeister's answer in obj-C and user3344977's nicely conversion of it to Swift, as well as Tonton's guidance, I came up with the solution:
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 中的颜色 alpha 变化，背景颜色将缓慢变化.
Now, when the user starts scrolling to the next/prev page, the background color will slowly change due to color alpha change in percentageHorizontalOffset.
感谢所有提到的人！
这篇关于当用户滚动到不同的页面时，如何在“UICollectionView"的不同背景颜色之间淡入淡出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
