制作动画以滑动和隐藏/显示 UIView(swift 5)

Question

我想为这两个视图添加动画。

1. 红色UIView
2. 绿色UIView

My storyboard look like this

从图片中我想在点击这两个视图时添加一个动画。

首先从隐藏红色UIView开始。

动作：1

when i click on green view i want green uiview silde to the right side until it disappear

红色的UIView会立即从右侧滑出。

red uiview slide from right side

当它在情节提要的那个点时停止并隐藏绿色UIView。

动作：2

当我点击红色视图时，我希望它向右滑动直到它消失。显示绿色UIView 并从右上角出现并隐藏红色UIView。

red UIView slide out

我的代码

import UIKit

class TestViewCell: UICollectionViewCell {

    @IBOutlet weak var bgView: UIView!

    @IBOutlet weak var bgAlertView: UIView!
    @IBOutlet weak var imgAlert: UIImageView!

    @IBOutlet weak var bgAlreadyAlertView: UIView!
    @IBOutlet weak var imgAlreadyAlert: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()

        //Make an action when tap on bgAlertView
        let actionBgAlert : Selector = #selector(self.actionBgAlert)
        let viewPostsViewGesture = UITapGestureRecognizer(target: self, action: actionBgAlert)
        bgAlertView.isUserInteractionEnabled = true
        bgAlertView.addGestureRecognizer(viewPostsViewGesture)

        //Make an action when tap on bgAlreadyAlertView
        let actionBgAlreadyAlert : Selector = #selector(self.actionBgAlreadyAlert)
        let viewAlreadyViewGesture = UITapGestureRecognizer(target: self, action: actionBgAlreadyAlert)
        bgAlreadyAlertView.isUserInteractionEnabled = true
        bgAlreadyAlertView.addGestureRecognizer(viewAlreadyViewGesture)

    }

    //action1
    @objc func actionBgAlert(sender: UITapGestureRecognizer){

        if imgAlert.image == #imageLiteral(resourceName: "alarm") {

            self.bgAlertView.isHidden = true
            self.bgAlreadyAlertView.isHidden = false 

    }

    //action2
    @objc func actionBgAlreadyAlert(sender: UITapGestureRecognizer){

        if imgAlreadyAlert.image == #imageLiteral(resourceName: "alarmedMain") {

            self.bgAlertView.isHidden = false
            self.bgAlreadyAlertView.isHidden = true 

    }

}

Answer 1

在情节提要中设置视图大小的约束。从红色视图的右侧设置约束，从它们共享的父视图的右侧设置绿色视图。为两个视图的两个位置所需的值定义一些常量。 然后是这样的：

    @IBOutlet weak var greenConstraint : NSLayoutConstraint
    @IBOutlet weak var redConstraint : NSLayoutConstraint

    let greenSlideOutValue = -2000.0 // big enough to get green view offscreen
    let redSlideInValue = 0.0 // aligns red view right edge to superview

    let greenSlideInValue = 100.0 // puts green view onscreen offset from right edge
    let redSlideOutValue = -2500.0 // big enough to get red view offscreen.

    UIView.animate(withDuration: 0.75, delay: 1.0, options: .curveEaseOut, animations: {
          greenConstraint.constant = greenSlideOutValue
          redConstraint.constant = redSlideInValue
          self.view.layoutIfNeeded()
        }, completion: { finished in
          print(“slide green out, red in”)
        })

在事件处理程序中执行此操作，例如与视图关联的点击或手势识别器。对红色视图事件执行类似操作

代码未编译，只是输入，但应该可以帮助您开始。