如何使视图滚动滚动视图动画？

Question

所以我有一个UIView，我想让它在scrollviews滚动动画的相反方向上设置动画。我该怎么做呢？当然这应该取决于我认为的scrollview.contentOffset。因此，如果你滚动另一个方向，它会回到它的位置。因此，翻译取决于用户滚动的距离。我想使用以下代码。另请注意，UIView我目前没有滚动视图的子项。假设始终保持在屏幕上，但改变位置。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView.contentOffset.x >= scrollView.contentSize.width {
    UIView.animate(withDuration: 2.0, animations: {
        self.view.layoutIfNeeded()
    })
}

Answer 1

一个简单的解决方案是：

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    let percentage = scrollView.contentOffset.x / scrollView.contentSize.width
    self.box.frame.origin.x = UIScreen.main.bounds.width * percentage
}

只需计算已滚动的contentSize的百分比，并将X位置设置为屏幕宽度的相同百分比。

它可以通过一些改进来确保视图在某些条件下不会超出屏幕范围。因此，您可能需要将计算中框的宽度计算为增强。

以下是我用于测试的代码，背景图片是4K壁纸图片。

class ViewController: UIViewController {

    var box = UIView()
    var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

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

        NSLayoutConstraint(item: scrollView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: scrollView, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: scrollView, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: scrollView, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true


        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.image = UIImage(named: "background")
        self.scrollView.addSubview(imageView)

        NSLayoutConstraint(item: imageView, attribute: .top, relatedBy: .equal, toItem: scrollView, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: imageView, attribute: .left, relatedBy: .equal, toItem: scrollView, attribute: .left, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: imageView, attribute: .right, relatedBy: .equal, toItem: scrollView, attribute: .right, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: imageView, attribute: .bottom, relatedBy: .equal, toItem: scrollView, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true

        box.frame = CGRect(x: 0, y: UIScreen.main.bounds.height - 110, width: 100, height: 100)
        box.backgroundColor = .black
        self.view.addSubview(box)
    }
}

extension ViewController: UIScrollViewDelegate {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {

        let percentage = scrollView.contentOffset.x / scrollView.contentSize.width
        let xPosition = UIScreen.main.bounds.width * percentage

        self.box.frame.origin.x = xPosition
    }
}