Move UIImage horizontally with animation

Question

I want to move UIImageView horizontally from left to right and right to left. I designed this as below.

UIView (green color)
Arrow Image (Leading of UIView, Center vertically of UIView, Fix Height, Width)
UILabel (Center Horizontally & center Vertically of UIView)
Button (Leading, Top, Trailing, Bottom of UIView) In above image, Green color is UIView and the left arrow icon is image. so when user press the button i want to move Arrow Image from Left to Right and Right to Left vice versa.

EDIT 1

Thanks for your answer

if sender.isSelected {
    UIView.animate(withDuration: 1.0, animations: {
        self.imgVWInOut.frame.origin.x = (self.vwPunchInOut.bounds.maxX - self.imgVWInOut.bounds.width) - 10
        }) { (done) in
    }
 } else {
     UIView.animate(withDuration: 1.0, animations: {
         self.imgVWInOut.frame.origin.x = 10
         }) { (done) in
      }
 }

But when i try to change UIView background color and UIImageView image then animation not working proper.

@IBAction func btnPunchInOutTapped(_ sender: UIButton) {
    sender.isSelected = !sender.isSelected
    if sender.isSelected {
            UIView.animate(withDuration: 1.0, animations: {
                self.imgVWInOut.frame.origin.x = (self.vwPunchInOut.bounds.maxX - self.imgVWInOut.bounds.width) - 10
            }) { (done) in
                self.imgVWInOut.image = #imageLiteral(resourceName: "ic_punchout")
                self.lblPunchInOut.text = "Punch out".localized()
                self.vwPunchInOut.backgroundColor = Colors.punchOutColor
            }
        } else {
            UIView.animate(withDuration: 1.0, animations: {
                self.imgVWInOut.frame.origin.x = 10
            }) { (done) in
                self.imgVWInOut.image = #imageLiteral(resourceName: "ic_punchout")
                self.lblPunchInOut.text = "Punch out".localized()
                self.vwPunchInOut.backgroundColor = Colors.punchOutColor
            }
        }
}

Requirement

Default look likes this. enter image description here

When user press button it will look like this after animation done.

enter image description here

GIF Link : https://drive.google.com/file/d/1R2hfcwfhyO5JA9CQt1_6Auto3YBRj3yn/view?usp=sharing

Demo project Link :https://drive.google.com/file/d/1H0b3D61fPIxWqSZL8tdvp0RP8juVdr_Z/view?usp=sharing

How can i achieve this. will you please help me for that. Thanks

PGDev PGDev · Accepted Answer · 2020-08-31T06:02:13

You need to animate the frame of arrowImageView w.r.t to the customView(green color view), i.e.

@IBAction func onTapButton(_ sender: UIButton) {
    self.arrowImageView.frame.origin.x = self.customView.bounds.minX
    UIView.animate(withDuration: 1.0) {
        self.arrowImageView.frame.origin.x = self.customView.bounds.maxX - self.arrowImageView.bounds.width
    }
}

Give the animation duration as per your requirement.

EDIT:

You need to change the isSelected state of sender on button tap,

@IBAction func onTapButton(_ sender: UIButton) {
    sender.isSelected = !sender.isSelected //here...
    //rest of the code...
}

Move UIImage horizontally with animation

1 Answers