效果图

QQ20180806-161608@2x.png

点击加号，显示选择的项目，右上角加号，变为x号。
点击x号，收起选择项目，x号变加号。

核心动画代码

1.顶部title动画

//在点击加号的方法里
isMenuOpen = !isMenuOpen
//查看标题相关的约束
titleLabel.superview?.constraints.forEach { constraint in
    //找到有关标题的约束，并且是关于centerx的约束，重新设置centerx约束
    if constraint.firstItem === titleLabel &&
        constraint.firstAttribute == .centerX {
        constraint.constant = isMenuOpen ? -100.0 : 0.0
        return
    }
//替换相关约束，在storyboard给约束一个id，
//把约束状态改为false，就会失去与控件的关联。
//然后添加一个新的约束，在最后把约束的id重新给新的约束赋上，并使约束状态改为true。
    if constraint.identifier == "TitleCenterY" {
        constraint.isActive = false
        let newConstraint = NSLayoutConstraint(
            item: titleLabel,
            attribute: .centerY,
            relatedBy: .equal,
            toItem: titleLabel.superview!,
            attribute: .centerY,
            multiplier: isMenuOpen ? 0.67 : 1.0,
            constant: 5.0)
        newConstraint.identifier = "TitleCenterY"
        newConstraint.isActive = true
        return
    }
}

2.顶部展开收起动画
NSLayoutConstraint是表示约束的类。就像任何其他按钮、图像视图或标签一样，你也可以创建约束的outlet。

//改变顶部视图的高度约束
menuHeightConstraint.constant = isMenuOpen ? 200.0 : 60.0
titleLabel.text = isMenuOpen ? "Select Item" : "Packing List"

3.加号按钮变x号

//旋转按钮
UIView.animate(withDuration: 1.0, delay: 0.0,
                       usingSpringWithDamping: 0.4, initialSpringVelocity: 10.0,
                       options: .curveEaseIn,
                       animations: {
                        //add
                        let angle: CGFloat = self.isMenuOpen ? .pi / 4 : 0.0
                        self.buttonMenu.transform = CGAffineTransform(rotationAngle: angle)
        },completion: nil)

4.最重要的一步

//在第三步中 //add处添加这一行
//因为，你虽然更新了约束值，
//但是iOS还没有更新布局，在闭包中调用layoutIfNeeded()，重新布局，才能显示动画效果
         self.view.layoutIfNeeded()