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

时间:2019-08-25 20:31:11

标签: ios swift uiview uitapgesturerecognizer

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

  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 

    }

}

1 个答案:

答案 0 :(得分:0)

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

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

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

代码尚未编译,只是输入了代码,但应该会让您入门。