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功能只需要进行一些修改。

要使代码适用于任意数量的页面，您需要逻辑来根据内容偏移量确定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，它们表示在任何给定点的当前偏移量之上和之下的页面。这些索引用于从颜色数组中抓取颜色并将它们混合在一起。

演示Gif

这是一个完整的，有效的实现，可以在Swift Playground中轻松测试：

Swift Playground Code

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

在页面滑动期间更改页面控制器的颜色

1 个答案: