效果图
packing.gif
点击cell，弹出对应图片，一秒后收回。
核心代码
- 初始约束
//imageView的centerx与视图控制器view的centerx一样。
let conX = imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
//imageView的底部相比视图控制器view的底部下沉imageView.frame.width的高度。
let conBottom = imageView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: imageView.frame.width)
//imageView的宽等于1/3的视图控制器view的宽度
let conWidth = imageView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.33, constant: -50.0)
//imageView的宽和高相等。
let conHeight = imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor)
//添加约束
NSLayoutConstraint.activate([conX, conBottom, conWidth, conHeight])
//更新约束
view.layoutIfNeeded()
NSLayoutAnchor对于创建公共约束来说是非常方便的。
conWidth的constant等于-50是为了弹出的时候有一个由小变大的效果，所以先减少50.
- 弹出动画
修改约束使视图显示
UIView.animate(withDuration: 0.8,
delay: 0.0,
usingSpringWithDamping: 0.4,
initialSpringVelocity: 0.0,
animations: {
//修改底部约束
conBottom.constant = -imageView.frame.size.height/2
//修改宽度约束，从-50 到 0，此时宽度恢复到1/3的view宽度
conWidth.constant = 0.0
//更新约束
self.view.layoutIfNeeded()
}, completion: nil)
- 收起动画
修改约束跟初始一样。并在动画完成时，移除视图。
UIView.animate(withDuration: 0.8,
delay: 1.0,
usingSpringWithDamping: 0.4,
initialSpringVelocity: 0.0,
animations: {
conBottom.constant = imageView.frame.width
conWidth.constant = -50.0
self.view.layoutIfNeeded()
}, completion: { _ in
imageView.removeFromSuperview()
})
