如何看见？-DEV365 开发者社区

让我们看看如何在应用程序中创建视差效应。

首先，让我们定义什么是视差。视差滚动是一种流行的设计技术，用于通过以不同速度移动多个内容来创建滚动效果。这是将视觉兴趣和深度添加到您的应用或网站上的有效方法。您可以使用UIScrollView实现类似的效果。在此博客文章中，我们将探讨如何使用UIScrollView创建视差效应。

要使用UIScrollView创建视差效果，我们将使用两个视差子视图。我们将根据UIScrollView的滚动位置调整其位置。

步骤1：创建视图

首先，让我们以编程方式创建视图并设置初始帧/约束。我们可以在视图控制器的viewDidLoad()方法中执行此操作。

class ViewController: UIViewController, UIScrollViewDelegate {

    let scrollView = UIScrollView()
    let contentView = UIView()
    let parallax1View = UIView()
    let parallax2View = UIView()
    let parallax3View = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView.delegate = self
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)

        contentView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(contentView)

        parallax1View.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
        parallax1View.backgroundColor = .red
        parallax1View.clipsToBounds = true
        parallax1View.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(parallax1View)

        parallax2View.frame = CGRect(x: 100, y: 0, width: 200, height: 100)
        parallax2View.backgroundColor = .yellow
        parallax2View.clipsToBounds = true
        parallax2View.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(parallax2View)

        self.setUpConstraints()
    }

    func setUpConstraints() {
        NSLayoutConstraint.activate([
            // Scroll view
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),

            // Content view
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
            contentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor, multiplier: 2)
        ])
    }
}

在此代码中，我们创建所需的视图并设置了定位和大小视图的约束。

步骤2：调整视差子视图位置

接下来，我们需要根据UIScrollView的滚动位置调整parallaxImageView的位置。我们可以在UIScrollViewDelegate协议的scrollViewDidScroll(_:)方法中执行此操作。

extension ViewController {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let yContentOffest = scrollView.contentOffset.y
        let ySlowerOffset = yContentOffest / 2
        let yFasterOffset = 2 * yContentOffest
        parallax1View.frame.origin.y = -ySlowerOffset
        parallax2View.frame.origin.y = -yFasterOffset
    }
}

在此代码中，我们计算UIScrollView的垂直偏移并调整视差视图的位置。

结论

在此博客中，我们学会了如何使用UIScrollView创建非常基本的视差效应。我们创建了两个视图，设置约束，并根据滚动位置调整了其位置。现在，您可以使用此技术在自己的应用中创建令人惊叹的视差效果！