Making Images move left to right out of the screen

Question

I am trying to make my top and bottom image to move out of the screen, and when they are out of the screen; my image logo appears. This was working perfectly but when I constrained my images they did the opposite.

So Instead of moving out of the screen, they come from outside the screen and move into the screen.

This is my code, thanks in advance.

func dismissImages(){
        imageLogo.isHidden = true

        UIView.animate(withDuration: 17) {
            //self.topImage.frame.origin.x
            self.topImage.center.x -= 400

        }


        UIView.animate(withDuration: 17, animations: {
            self.bottomImage.center.x += 400
        }) { (sucess) in
            if sucess {
                self.imageLogo.isHidden = false
            }
        }

Answer 1

I would suggest animating the layer instead of the view itself

func dismissImages(){
    imageLogo.isHidden = true

    UIView.animate(withDuration: 17) {
        self.topImage.layer.frame.origin.x -= self.view.frame.width
    }

    UIView.animate(withDuration: 17, animations: {
        self.bottomImage.layer.frame.origin.x += self.view.frame.width
    }) { guard $0 else { return }
        self.imageLogo.isHidden = false
    }
}

Answer 2

Setup an NSLayoutConstraint for each image and animate the constant for that constraint.

// SETUP INITIAL POSITION
let topImageHorizontalConstraint = NSLayoutConstraint(item: topImage, attribute: NSLayoutAttribute.centerX, relatedBy: .equal, toItem: parentView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0) // Note: Change the constant from 0 to whatever you need it to be initially.

// ACTIVATE CONSTRAINT
topImageHorizontalConstraint.isActive = true

// ANIMATE THE CONSTANT ON THE CONSTRAINT
// Note: This part will be in dismissImages().
UIView.animate(withDuration: 17, animations: {
    topImageHorizontalConstraint.constant -= 400                
},
completion: { (animationFinished: Bool) in
    if animationFinished {
            // Show logo or whatever
    }
})

As of iOS 9+ you can use NSLayoutAnchor to create the constraints and simplify things a bit.

// SETUP INITIAL POSITION
let topImageHorizontalConstraint = topImage.centerXAnchor.constraint(equalTo: parentView.centerXAnchor, constant: 0)

// ACTIVATE CONSTRAINT
topImageHorizontalConstraint.isActive = true

// ANIMATE THE CONSTANT ON THE CONSTRAINT
// Note: This part will be in dismissImages().
UIView.animate(withDuration: 17, animations: {
    topImageHorizontalConstraint.constant -= 400                
},
completion: { (animationFinished: Bool) in
    if animationFinished {
            // Show logo or whatever
    }
})

I like anchors because it seems easier to visualize the relationship but it's pretty similar in this case.

Note: You'll need to have variables for your constraints outside of dismissImages(). Then create the constraints in init() or viewDidLoad() or somewhere initially, then call dismissImages() to animate the change.

Answer 3

I Figured it out. I called my animation function before I called my constraints functions. I worked perfectly when I put mu animation function in ViewDidAppear. That way the animations will only occur when the view appears and constraints are set.

thanks.