Saturday, 10 August 2019

UIScrollview Animation Transition From View To View

I am trying to perform a transition animation whenever a user scrolls on a paginated view, i.e: From Page 1 to Page 2.

Main Representation

Unfortunately, I've not been able to replicate that.

Attach below is what I've done:

class OnboardingParallaxImageView: BaseUIView, UIScrollViewDelegate {

    let allImages = [#imageLiteral(resourceName: "onboarding_handshake_icon"), #imageLiteral(resourceName: "onboarding_paylinc_icon")]

    var activeCurrentPage = 1

    let bgView: UIImageView = {
        let image = #imageLiteral(resourceName: "onboard_bg_gradient")
        let view = UIImageView(image: image)
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    let firstImageView: UIImageView = {
        let view = UIImageView()
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    let secondImageView: UIImageView = {
        let view = UIImageView()
        view.isHidden = true
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    var firstImageHeightAnchor: NSLayoutConstraint?
    var firstImageWidthAnchor: NSLayoutConstraint?
    var secondImageHeightAnchor: NSLayoutConstraint?
    var secondImageWidthAnchor: NSLayoutConstraint?

    override func setupViews() {
        super.setupViews()
        addSubview(bgView)
        addSubview(firstImageView)
        addSubview(secondImageView)

        bgView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true
        bgView.heightAnchor.constraint(equalTo: heightAnchor).isActive = true
        bgView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        bgView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true

        firstImageWidthAnchor = firstImageView.widthAnchor.constraint(equalTo: widthAnchor)
        firstImageWidthAnchor?.isActive = true
        firstImageHeightAnchor = firstImageView.heightAnchor.constraint(equalTo: heightAnchor)
        firstImageHeightAnchor?.isActive = true
        firstImageView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        firstImageView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        firstImageView.image = allImages[0]

        secondImageWidthAnchor = secondImageView.widthAnchor.constraint(equalTo: widthAnchor)
        secondImageWidthAnchor?.isActive = true
        secondImageHeightAnchor = secondImageView.heightAnchor.constraint(equalTo: heightAnchor)
        secondImageHeightAnchor?.isActive = true
        secondImageView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        secondImageView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        secondImageView.image = allImages[1]
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let frameWidth = frame.size.width
        secondImageHeightAnchor?.constant = -(frameWidth - 32)
        secondImageWidthAnchor?.constant = -(frameWidth - 32)
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {

        let offSet = scrollView.contentOffset.x

        let frameWidth = frame.size.width / 2

        let toUseConstant = (CGFloat(abs(offSet)) / frameWidth)

        if activeCurrentPage == 1 {
            if offSet <= 0 {
                firstImageHeightAnchor?.constant = 0
                firstImageWidthAnchor?.constant = 0
                firstImageView.isHidden = false

                secondImageView.isHidden = true
            } else {
                firstImageHeightAnchor?.constant += -(toUseConstant)
                firstImageWidthAnchor?.constant += -(toUseConstant)
                firstImageView.isHidden = false

                secondImageHeightAnchor?.constant += -(toUseConstant)
                secondImageWidthAnchor?.constant += -(toUseConstant)
                secondImageView.isHidden = false
                secondImageView.alpha = toUseConstant
            }
        }

        UIView.animate(withDuration: 0.5) {
            self.layoutSubviews()
        }
    }

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        self.activeCurrentPage = scrollView.currentPage
    }
}

This is the result of what I've been able to achieve:

Failed Representation

How can I go about transitioning from A to B without any funny behaviour.

Thanks



from UIScrollview Animation Transition From View To View

No comments:

Post a Comment