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

Question

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

1. 红UIView
2. 绿色UIView

我的故事板看起来像这样

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

首先从隐藏红色UIView开始。

操作 ： 1

当我单击绿色视图时，我希望绿色的UIview在右侧，直到它消失

红色UIView将立即从右侧滑出。

右侧的红色 UIVIEW 幻灯片

并在故事板中的该点停止并隐藏绿色UIView。

动作 ： 2

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

红色 UIView 滑出

我的代码

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

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

代码不会编译，只是键入，但应该可以帮助您入门。