改變顏色

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