我的横向UIScrollView
宽度为960
,足以容纳3个UIViewController
视图。
每个视图只有一个背景颜色。第一个是粉红色,第二个是蓝色,第三个是绿色。
我希望在用户滚动时将可见颜色混合/混合/淡化。
因此,如果您从第1页(粉红色)滚动到第2页(蓝色),当用户完全刷到最终蓝色时,会有一些混合/混合/渐变粉红色和蓝色第2页。
我发现了一个关于我正在尝试做什么的问题,我已经实现了答案,可以在这里找到:https://stackoverflow.com/a/26159561/3344977
这个答案确实有效,我唯一的问题是这个答案只是为了使用2个屏幕/颜色,我有3个屏幕/颜色。
我理解这个答案的基础知识,这取决于UIScrollView的contentOffset.x
来计算当前的颜色,但除此之外,我在数学方面很糟糕,这让我不知道怎么修改这个到使用第三种颜色。
答案 0 :(得分:5)
Fogmeister发布的答案完美无缺!
这里的答案转换为Swift:
// this just gets the percentage offset.
// 0,0 = no scroll
// 1,1 = maximum scroll
func scrollViewdidScrollToPercentageOffset(scrollView: UIScrollView, percentageOffset: CGPoint) {
// get your colours to fade between
var colors = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor()]
// choose the colours to fade between based on the percentage.
if (percentageOffset.x < 0.5) {
// multiply the offset by 2 because we want 0.5 to be 100%
scrollView.backgroundColor = fadeFromColor(colors[0], colors[1], percentageOffset.x*2)
} else {
// minus 0.5 because we want 0.5 to be 0%
scrollView.backgroundColor = fadeFromColor(colors[1], colors[2], (percentageOffset.x - 0.5)*2)
}
}
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
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
var red = (toRed - fromRed) * withPercentage + fromRed
var green = (toGreen - fromGreen) * withPercentage + fromGreen
var blue = (toBlue - fromBlue) * withPercentage + fromBlue
var alpha = (toAlpha - fromAlpha) * withPercentage + fromAlpha
// return the fade colour
return UIColor(red: red, green: green, blue: blue, alpha: alpha)
}
答案 1 :(得分:4)
是的,您绝对可以将它用于三种颜色(或更多)。
对于三种颜色(比如红色,绿色,蓝色),红色为0.0,绿色为0.5,蓝色为1.0。所以你只需要在两个渐变之间拆分方法(红绿色和绿色蓝色将分别计算)。
在获得方法之前使用我的代码...
// this just gets the percentage offset.
// 0,0 = no scroll
// 1,1 = maximum scroll
- (void)scrollView:(UIScrollView *)scrollView didScrollToPercentageOffset:(CGPoint)percentageOffset
{
// get your colours to fade between
NSArray *colours = @[[UIColor redColor], [UIColor yellowColor], [UIColor purpleColor]];
// choose the colours to fade between based on the percentage.
if (percentageOffset.x < 0.5) {
// multiply the offset by 2 because we want 0.5 to be 100%
self.backgroundColor = [self fadeFromColor:colours[0] toColor:colours[1] withPercentage:percentageOffset.x*2];
} else {
// minus 0.5 because we want 0.5 to be 0%
self.backgroundColor = [self fadeFromColor:colours[1] toColor:colours[2] withPercentage:(percentageOffset.x-0.5)*2];
}
}
// this is a more generic method to fade between two colours
// it allows the colours to be passed in as parameters
- (UIColor *)fadeFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor withPercentage:(CGFloat)percentage
{
// get the RGBA values from the colours
CGFloat fromRed, fromGreen, fromBlue, fromAlpha;
[fromColor getRed:&fromRed green:&fromGreen blue:&fromBlue alpha:&fromAlpha];
CGFloat toRed, toGreen, toBlue, toAlpha;
[toColor getRed:&toRed green:&toGreen blue:&toBlue alpha:&toAlpha];
//calculate the actual RGBA values of the fade colour
CGFloat red = (toRed - fromRed) * percentage + fromRed;
CGFloat green = (toGreen - fromGreen) * percentage + fromGreen;
CGFloat blue = (toBlue - fromBlue) * percentage + fromBlue;
CGFloat alpha = (toAlpha - fromAlpha) * percentage + fromAlpha;
// return the fade colour
return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}
这将在所有三种颜色之间很好地消失。
您可以为此添加更多颜色,并更改它分割百分比的方式。
答案 2 :(得分:1)
以下是使用Swift 4.2处理任何数量的颜色(在我的情况下为UICollectionView中的页面)的答案:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let maximumOffset = scrollView.contentSize.width - scrollView.frame.width
let currentOffset = scrollView.contentOffset.x
let offsetPercentage = currentOffset / maximumOffset
let sharesCount = CGFloat(colorsArray.count - 1)
var currentShareIndex: CGFloat = 0
switch offsetPercentage {
case ..<0:
currentShareIndex = 0
case 0..<1:
currentShareIndex = floor(offsetPercentage * sharesCount)
case 1... :
currentShareIndex = sharesCount - 1
default: break
}
let firstColorIndex = Int(currentShareIndex)
let secondColorIndex = Int(currentShareIndex) + 1
let colorPercentage = (offsetPercentage - currentShareIndex / sharesCount) * sharesCount
scrollView.backgroundColor = UIColor.fade(from: colorsArray[firstColorIndex], to: colorsArray[secondColorIndex], with: colorPercentage)
}