使用NSLayoutConstraints在UIView上进行简单的向上滑动动画

Question

我花了一段时间尝试解决这个问题，但我做不到。我在这里可能缺少一些非常简单的东西。我正在尝试为从底部进入的视图设置动画。这是我用于视图的代码：

private let undoView: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .white
    view.layer.cornerRadius = 15
    view.layer.shadowOffset = .zero
    view.layer.shadowOpacity = 0.3
    view.layer.shadowRadius = 5
    view.layer.shouldRasterize = true
    view.layer.rasterizationScale = UIScreen.main.scale

    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Undo", for: .normal)
    button.titleLabel?.textAlignment = .center
    button.setTitleColor(.systemBlue, for: .normal)
    let buttonConstraints = [
        button.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
        button.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
        button.topAnchor.constraint(equalTo: view.topAnchor, constant: 16),
        button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -16)
    ]
    view.addSubview(button)
    NSLayoutConstraint.activate(buttonConstraints)

    let swipeGesture = UISwipeGestureRecognizer(target: view, action: #selector(undoViewSwiped))
    view.addGestureRecognizer(swipeGesture)

    return view
}()

这是我用来尝试实现动画的代码：

func addUndoView() {
    var bottomConstraint = undoView.topAnchor.constraint(equalTo: view.bottomAnchor, constant: 0)
    let constraints = [
        undoView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        undoView.widthAnchor.constraint(equalToConstant: view.bounds.width / 3),
        bottomConstraint,
        undoView.heightAnchor.constraint(equalToConstant: 50)
    ]
    view.addSubview(undoView)
    NSLayoutConstraint.activate(constraints)
    undoView.layoutIfNeeded()

    bottomConstraint.isActive = false
    bottomConstraint = undoView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor, constant: -58)
    bottomConstraint.isActive = true

    UIView.animate(withDuration: 0.5, delay: 0.2, animations: {
        self.undoView.layoutIfNeeded()
    })
}

我希望仅在可见视图下创建视图，然后将其向上滑动至底部布局边距上方的8。但是，此代码仅使视图在其最终位置“展开”，而不是从底部进入视图。由于某种原因，使用self.view.layoutIfNeeded（）可使视图从屏幕左上方飞入。

Answer 1

早上好，我通常使用transform属性将一个视图从x位置移到y部分，请检查此示例。

class ViewController: UIViewController {

    let button : UIButton = {
        let button = UIButton(type: .custom)
        button.setTitle("Button", for: .normal)
        button.backgroundColor = .gray
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()

    let customView : UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .red
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        view.addSubview(button)
        view.addSubview(customView)
        NSLayoutConstraint.activate([
            button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            customView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            customView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            customView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            customView.heightAnchor.constraint(equalToConstant: 100)
        ])
    }
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        setupAnimationCustomView()
    }

    private func setupAnimationCustomView(){
        UIView.animate(withDuration: 1, delay: 0 , options: .curveEaseOut, animations: {
            print(self.button.frame.origin.y)
            let translationY = self.view.frame.height - self.button.frame.origin.y - self.button.frame.height - self.customView.frame.height - 8
            self.customView.transform = CGAffineTransform(translationX: 0, y:  translationY * (-1))

        }, completion: nil)
    }

}

在动画上，我计算了移动customView所需的距离。