swift - 在页面滑动期间更改页面 Controller 的颜色

Question

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

UIColor.blue; UIColor.红色; UIColor.黄色

当我从红色滚动到绿色时，我想淡入绿色，我已经用这段代码实现了。 (忽略自定义 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 函数中进行一些修改。

要使代码适用于任意数量的页面，您需要逻辑来根据 ScrollView 的内容偏移量确定 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)
}

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

演示动图

这是可以在 Swift Playground 中轻松测试的完整、有效的实现:

Swift Playground 代码

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 一样在 playground 的实时 View 中运行，您还需要以下代码:

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