使用動畫水平移動 UIImage

Question

我想從左到右和從右到左水平移動UIImageView 。 我設計如下。

1. UIView（綠色）
2. 箭頭圖像（UIView 前導，UIView 垂直居中，固定高度，寬度）
3. UILabel (UIView 水平居中 & 垂直居中)
4. 按鈕（UIView 的前導、頂部、尾部、底部） 在上圖中，綠色是 UIView，左箭頭圖標是圖像。 因此，當用戶按下按鈕時，我想將箭頭圖像從左向右移動，從右向左移動，反之亦然。

編輯 1

感謝您的回答

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
      }
 }

但是當我嘗試更改UIView背景顏色和UIImageView圖像時，動畫無法正常工作。

@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
            }
        }
}

要求

默認看起來像這樣。 在此處輸入圖片說明

當用戶按下按鈕時，它會在動畫完成后看起來像這樣。

在此處輸入圖片說明

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

演示項目鏈接： https : //drive.google.com/file/d/1H0b3D61fPIxWqSZL8tdvp0RP8juVdr_Z/view?usp=sharing

我怎樣才能做到這一點。 你能幫我嗎。 謝謝

Answer 1

您需要將arrowImageView wrt 的frame設置為customView （綠色視圖），即

@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
    }
}

根據您的要求提供動畫duration 。

編輯：

您需要在按鈕點擊時更改sender的isSelected狀態，

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