Swift 中 imageViews 的视差效果问题 animation

Question

我正在尝试为滚动视图中的图片创建视差效果 animation。 主要思想是打开和关闭约束来实现这一点。

通常一切正常，但滚动后，有时您会看到一条细线是下一张图像的一部分，或者 animation 变得非常清晰，我真的不明白为什么会发生这种情况。

也许有人会告诉我一个更好的方法来实现视差效果animation？ 我将非常感谢您的帮助。

我在 GitHub 上留下了代码，你可以运行它并阅读我的评论： https://github.com/swiloper/ConstraintsProblem

并观看我得到的一个小演示：

滚动时侧面的这条细线：

Answer 1

下载您的 GitHub 项目...

您得到“细线是下一张图片的一部分” ，因为您在scrollViewDidScroll中的这部分代码：

if -(scrollView.currentVerticalOffset + UIApplication.shared.topSafeAreaInset) > 0 {
    // change some framing / constraint values...
} else {
    // if user do not drag to dawn I disable constraints
    disableUniversalImageViewConstraint(imageView: placeImageScrollView.currentImageView)
}

不重置else块中的值。 因此，您的原始0值“卡在” > 0 （通常最终为0.5 ）。

---

不确定您所说的“animation 变得非常锐利”是什么意思……虽然，由于您添加/删除约束的方式，imageViews 可能会错位。

我建议不要混合/匹配显式框架和约束。 看看这种方法：

class ViewController: UIViewController {

    // MARK: Properties
    
    lazy var place: Place = Place(imageNames: ["firstLakeLemuriaImage", "secondLakeLemuriaImage", "thirdLakeLemuriaImage"])

    // scrollView to display all content
    private lazy var scrollView: UIScrollView = {
        let scrollView = UIScrollView(frame: screenBounds)
        scrollView.contentSize = CGSize(width: screenWidth, height: placeDescriptionContentView.frame.height + screenWidth)
        scrollView.frame.size.height -= UIApplication.shared.bottomSafeAreaInset
        scrollView.backgroundColor = .white
        scrollView.delegate = self
        scrollView.tag = 1
        return scrollView
    }()
    
    // scrollView to display place images
    private lazy var placeImageScrollView: ImageScrollView! = {
        let scrollView = ImageScrollView(frame: CGRect(x: 0, y: -UIApplication.shared.topSafeAreaInset, width: screenWidth, height: screenWidth), place: place)
        scrollView.delegate = self
        scrollView.tag = 2
        // allow subviews to show beyond scroll view's frame
        //  so we can "stretch" them for the parallax effect
        scrollView.clipsToBounds = false
        return scrollView
    }()
    
    private lazy var placeImagePageControl: UIPageControl! = {
        let pageControlWidth = 160.0
        let pageControlHeight = 36.0
        let leftPageControlSpacing = 58.0
        let pageControl = UIPageControl(frame: CGRect(x: screenWidth - pageControlWidth - sideSpacing + leftPageControlSpacing, y: sideSpacing, width: pageControlWidth, height: pageControlHeight))
        pageControl.addTarget(self, action: #selector(pageDidChange(_:)), for: .valueChanged)
        pageControl.numberOfPages = 3
        return pageControl
    }()
    
    private lazy var placeTitleView: UIView = {
        let titleLabel = UILabel(frame: CGRect(x: sideSpacing, y: 0.0, width: screenWidth - sideSpacing * 2, height: 60.0))
        titleLabel.font = UIFont.systemFont(ofSize: 31.0, weight: .bold)
        titleLabel.text = "Place Title"
        titleLabel.textColor = .white
        titleLabel.adjustsFontSizeToFitWidth = true
        
        let shadowView = UIView(frame: CGRect(x: 0.0, y: screenWidth - 60.0 - UIApplication.shared.topSafeAreaInset, width: screenWidth, height: 60.0))
        shadowView.layer.shadowPath = UIBezierPath(roundedRect: shadowView.bounds, cornerRadius: 10.0).cgPath
        shadowView.layer.shadowColor = UIColor.black.cgColor
        shadowView.layer.shadowOffset = CGSize.zero
        shadowView.layer.shadowOpacity = 0.3
        shadowView.layer.shadowRadius = 35.0
        shadowView.clipsToBounds = false
        shadowView.addSubview(titleLabel)
        
        return shadowView
    }()
    
    // contentView with description about place
    private lazy var placeDescriptionContentView: UIView = {
        let view = UIView(frame: CGRect(x: 0.0, y: placeImageScrollView.frame.maxY, width: screenWidth, height: 1000.0))
        view.backgroundColor = .white
        return view
    }()
    
    // indicates that image constraints is enable
    private var isConstraintEnable = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        addSubviews()
        setupConstraints()
    }
    
    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
    
    // MARK: Methods
    
    private func addSubviews() {
        view.addSubview(scrollView)
        scrollView.addSubview(placeImageScrollView)
        view.addSubview(placeImagePageControl)
        scrollView.addSubview(placeTitleView)
        scrollView.addSubview(placeDescriptionContentView)
    }
    
    private func setupConstraints() {

        placeImageScrollView.translatesAutoresizingMaskIntoConstraints = false
        placeImageScrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        placeImageScrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        placeImageScrollView.heightAnchor.constraint(equalToConstant: screenWidth).isActive = true
        placeImageScrollView.widthAnchor.constraint(equalTo: placeImageScrollView.heightAnchor).isActive = true
        
    }
    
    // MARK: Objc methods
    
    @objc private func pageDidChange(_ sender: UIPageControl) {
        placeImageScrollView.setContentOffset(CGPoint(x: CGFloat(sender.currentPage) * screenWidth, y: 0), animated: true)
        placeImagePageControl.currentPage = sender.currentPage
        // change current imageView
        placeImageScrollView.currentImageView = placeImageScrollView.imageViewsArray[placeImagePageControl.currentPage]
    }
}

// MARK: UIScrollViewDelegate

extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView.tag == 1 {
            // if user the user is dragging the page down
            if -(scrollView.currentVerticalOffset + UIApplication.shared.topSafeAreaInset) > 0 {
                
                // calculate the *original* imageView frame
                let n = CGFloat(placeImagePageControl.currentPage)
                var r = CGRect(x: n * screenWidth, y: 0.0, width: screenWidth, height: screenWidth)

                // we want the bottom of the imageView to "stick" to the top of the placeDescriptionContentView
                //  convert placeDescriptionContentView.frame to view coordinate space
                let ff = scrollView.convert(placeDescriptionContentView.frame, to: view)
                
                // we want to change the *original* imageView size by 1/2 of the difference
                let v = (screenWidth - ff.origin.y) * 0.5
                r = r.insetBy(dx: v, dy: v)
                // move it back to the top
                r.origin.y = 0
                // set the new frame
                placeImageScrollView.currentImageView.frame = r
                
            } else {
                
                // reset the imageView's frame
                let n = CGFloat(placeImagePageControl.currentPage)
                let r = CGRect(x: n * screenWidth, y: 0.0, width: screenWidth, height: screenWidth)
                placeImageScrollView.currentImageView.frame = r
            }
        } else {
            
            // user is scrolling the images left/right
            let currentPage = Int(round(scrollView.contentOffset.x / scrollView.frame.width))
            placeImagePageControl.currentPage = currentPage > 2 ? 2 : currentPage
            placeImageScrollView.currentImageView = placeImageScrollView.imageViewsArray[placeImagePageControl.currentPage]
            
        }
    }
}

final class ImageScrollView: UIScrollView {
    var currentImageView: UIImageView!
    // array for added imageViews
    var imageViewsArray: [UIImageView] = []
    
    init(frame: CGRect, place: Place) {
        super.init(frame: frame)
        setupImageScrollView(place: place)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    private func setupImageScrollView(place: Place) {
        contentSize = CGSize(width: screenWidth * 3, height: frame.height)
        showsHorizontalScrollIndicator = false
        backgroundColor = .white
        isPagingEnabled = true
        
        // add imageViews for scrollView
        for index in 0...2 {
            let image = UIImage.getImageFromBundle(fileName: place.imageNames[index], fileType: "jpg")
            let imageView = UIImageView(frame: CGRect(x: screenWidth * CGFloat(index), y: 0.0, width: screenWidth, height: screenWidth))
            imageView.contentMode = .scaleAspectFill
            imageView.clipsToBounds = true
            imageView.image = image
            addSubview(imageView)
            imageViewsArray.append(imageView)
            index == 0 ? currentImageView = imageView : nil
        }
    }
}