改变颜色

Question

所以我有三个页面，每个人都有自己的背景颜色，

UIColor.blue; UIColor.red; UIColor.yellow

当我从红色到绿色的滚动，我想褪色成绿色，我已经用这个代码实现了。 （忽略自定义UIColor值，我简化了解释）

public func scrollViewDidScroll(_ scrollView: UIScrollView) { 
     let point = scrollView.contentOffset 
     var percentComplete: CGFloat 
     percentComplete = fabs(point.x - view.frame.size.width)/view.frame.size.width 
     if percentComplete != 0{ 
      self.view.backgroundColor = fadeFromColor(fromColor: UIColor(red:0.20, green:0.60, blue:0.86, alpha:1.0), toColor: UIColor(red:0.91, green:0.30, blue:0.24, alpha:1.0), withPercentage: percentComplete) 
     } 
    } 
    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) 
    } 

问题是，我不知道如何让它淡出。它变成了旧的颜色。

我怎么会把它淡化回来和第四？谢谢

Answer 1

您的解决方案非常接近 - scrollViewDidScroll函数只需要一些修改。

要使代码适用于任意数量的页面，您需要逻辑来根据其内容偏移量来确定滚动视图所处的页面。

public func scrollViewDidScroll(_ scrollView: UIScrollView) { 
    let offset = scrollView.contentOffset.x 
    let lowerIndex = Int(floor(offset/scrollView.frame.width)) 
    let upperIndex = Int(ceil(offset/scrollView.frame.width)) 
    guard lowerIndex >= 0, upperIndex <= colors.count - 1 else { return } 
    let percentComplete = (offset - CGFloat(lowerIndex) * scrollView.frame.width)/scrollView.frame.width 
    scrollView.backgroundColor = fadeFromColor(fromColor: colors[lowerIndex], toColor: colors[upperIndex], withPercentage: percentComplete) 
} 

此实现计算lowerIndex和upperIndex，其表示的上方和当前在任何给定点偏移下方页面。这些索引用于从一组颜色中获取颜色并将它们混合在一起。

示范的Gif

以下是完整的，工作落实，可以在斯威夫特游乐场很容易地测出：

斯威夫特游乐场代码

class ViewController: UIViewController, UIScrollViewDelegate { 

    let colors = [UIColor(red:0.20, green:0.60, blue:0.86, alpha:1.0), UIColor(red:0.91, green:0.30, blue:0.24, alpha:1.0), UIColor.yellow] 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     let scrollView = UIScrollView() 
     scrollView.delegate = self 
     scrollView.frame = view.bounds 
     scrollView.isPagingEnabled = true 
     scrollView.contentSize = CGSize(width: CGFloat(colors.count) * scrollView.frame.width, height: scrollView.frame.height) 
     scrollView.backgroundColor = colors[0] 
     view.addSubview(scrollView) 

    } 

    public func scrollViewDidScroll(_ scrollView: UIScrollView) { 
     let offset = scrollView.contentOffset.x 
     let lowerIndex = Int(floor(offset/scrollView.frame.width)) 
     let upperIndex = Int(ceil(offset/scrollView.frame.width)) 
     guard lowerIndex >= 0, upperIndex <= colors.count - 1 else { return } 
     let percentComplete = (offset - CGFloat(lowerIndex) * scrollView.frame.width)/scrollView.frame.width 
     scrollView.backgroundColor = fadeFromColor(fromColor: colors[lowerIndex], toColor: colors[upperIndex], withPercentage: percentComplete) 
    } 

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

} 

为了做到这一点在操场的像GIF上述实时取景代码运行，您还需要下面的代码：

let vc = ViewController() 
PlaygroundPage.current.liveView = vc