一 捏合放大的图片自动缩小隐藏
- 在点击放大的视图容器中有scrollView 可以缩放
- 在scrollView的代理方法中可以拿到缩放的比例
/**
只要缩放就会调用
transform
a,d 缩放比例
tx, ty 位移
a,b,c,d 共同决定旋转
*/
func scrollViewDidZoom(scrollView: UIScrollView) {
print(imageView.transform.a)
}
- 这个是在浏览器内部cell中的监听，要控制界面的缩放应该有控制器来做
在此设置代理方法，提供缩放的比例给控制器
protocol PhotoBrowerCellDelegate: NSObjectProtocol {
/**
cell代理
- parameter scale: 缩放比例
*/
func photoBrowerCellZoom(scale: CGFloat)
}
weak var photoDelegate: PhotoBrowerCellDelegate?
- scrollView代理方法中传递缩放比例
/**
只要缩放就会调用
transform
a,d 缩放比例
tx, ty 位移
a,b,c,d 共同决定旋转
*/
func scrollViewDidZoom(scrollView: UIScrollView) {
print(imageView.transform.a)
photoDelegate?.photoBrowerCellZoom(imageView.transform.a)
}
- 然后在控制器中实现代理方法 此时控制器可以知道视图缩放比例
在代理方法中 实现交互式转场
实现交互转场需要遵守协议 --UIViewControllerInteractiveTransitioning
public protocol UIViewControllerInteractiveTransitioning : NSObjectProtocol {
public func startInteractiveTransition(transitionContext: UIViewControllerContextTransitioning)
optional public func completionSpeed() -> CGFloat
optional public func completionCurve() -> UIViewAnimationCurve
}
此协议中一共三个方法 后两个是 可选的 只需实现第一个即可
- 定义个变量记录 视图缩放比例 在代理方法中记录 比例
func photoBrowerCellZoom(scale: CGFloat) {
print(scale)
photoScale = scale
}
在交互转场代理方法中 做动画
extension PhotoBrowerController: UIViewControllerInteractiveTransitioning {
// 开始交互转场
func startInteractiveTransition(transitionContext: UIViewControllerContextTransitioning) {
// 设置形变
view.transform = CGAffineTransformMakeScale(photoScale, photoScale)
// 设置透明度
view.alpha = photoScale
}
}
- 然后在缩放代理方法中 判断条件调用代理方法做动画
if scale < 1 {
startInteractiveTransition(<#T##transitionContext: UIViewControllerContextTransitioning##UIViewControllerContextTransitioning#>)
}
参数中传递的对象需要遵守 --UIViewControllerContextTransitioning协议
另写一分类 遵守协议 实现协议方法
点进协议看头文件 需要必须实现的方法好多 全部复制进去 一一实现
// MARK -UIViewControllerContextTransitioning context 提供了转场所有细节
extension PhotoBrowerController: UIViewControllerContextTransitioning {
// This must be called whenever a transition completes (or is cancelled.)
// Typically this is called by the object conforming to the
// UIViewControllerAnimatedTransitioning protocol that was vended by the transitioning
// delegate. For purely interactive transitions it should be called by the
// interaction controller. This method effectively updates internal view
// controller state at the end of the transition.
// 结束转场动画 必须实现
func completeTransition(didComplete: Bool) {
// 关闭当前的控制器
dismissViewControllerAnimated(true, completion: nil)
}
/**
容器视图
- returns: 当前视图的父视图就是容器视图
*/
func containerView() -> UIView? { return view.superview }
func isAnimated() -> Bool { return true }
func isInteractive() -> Bool { return true }
func transitionWasCancelled() -> Bool { return false }
func presentationStyle() -> UIModalPresentationStyle { return UIModalPresentationStyle.Custom }
func updateInteractiveTransition(percentComplete: CGFloat) {}
func finishInteractiveTransition() {}
func cancelInteractiveTransition() {}
func viewControllerForKey(key: String) -> UIViewController? { return self }
func viewForKey(key: String) -> UIView? { return view }
func targetTransform() -> CGAffineTransform { return CGAffineTransformIdentity }
func initialFrameForViewController(vc: UIViewController) -> CGRect { return CGRectZero }
func finalFrameForViewController(vc: UIViewController) -> CGRect { return CGRectZero }
}
此时 在上边开始交互转场的方法中填入 self
运行此时已经可以实现
但是 背景视图依然存在 需要隐藏掉
func photoBrowerCellZoom(scale: CGFloat) {
print(scale)
photoScale = scale
// 设置隐藏
hiddenInterBackView(scale < 1)
if scale < 1 {
startInteractiveTransition(self)
}
}
private func hiddenInterBackView(hidden: Bool) {
collectionView.backgroundColor = hidden ? UIColor.clearColor() : UIColor.blackColor()
saveBtn.hidden = hidden
closeBtn.hidden = hidden
}
此时 已经可以实现缩小动画了 但是重新放大的时候发现边界会有白边
因为 在代理方法中设置放大比例中 用的上边定义的photoScale 是浮点型
我们重新设置 比例和alpha
func photoBrowerCellZoom(scale: CGFloat) {
print(scale)
photoScale = scale
// 设置隐藏
hiddenInterBackView(scale < 1)
if scale < 1 {
startInteractiveTransition(self)
} else {
view.transform = CGAffineTransformIdentity
view.alpha = 1.0
}
}
接下来实现缩放后 图片的消失效果
增加代理方法通知控制器缩放结束
protocol PhotoBrowerCellDelegate: NSObjectProtocol {
/**
cell代理
- parameter scale: 缩放比例
*/
func photoBrowerCellZoom(scale: CGFloat)
/**
缩放完成
*/
func photoBrowerCellEndZoom()
}
在scrollView代理方法中 调用 通知控制器
func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
var offsetX = (scrollView.bounds.width - view!.frame.width) * 0.5
offsetX = offsetX < 0 ? 0 : offsetX
var offsexY = (scrollView.bounds.height - view!.frame.height) * 0.5
offsexY = offsexY < 0 ? 0 : offsexY
scrollView.contentInset = UIEdgeInsets(top: offsexY, left: offsetX, bottom: 0, right: 0)
// 通知代理缩放结束
photoDelegate?.photoBrowerCellEndZoom()
}
控制器中实现缩放结束 动画
func photoBrowerCellEndZoom() {
if photoScale < 0.8 {
// 结束转场
completeTransition(true)
} else {
// 回复原状
UIView.animateWithDuration(0.25, animations: {
self.view.transform = CGAffineTransformIdentity
self.view.alpha = 1.0
}, completion: { (_) in
self.photoScale = 1.0
self.hiddenInterBackView(false)
})
}
}
此时缩放后 可以消失
二 缩小返回原来的位置
浏览器中可以滑动显示别的图片 当缩放的时候 要返回到当前的图片的原来的位置，所以要记录下来 当前显示图片的indexpath
浏览器控制器 提供获取当前索引的方法
// MARK: - 当前显示图片的索引
func currentIndexPath() -> NSIndexPath {
let indexPath = collectionView.indexPathsForVisibleItems().last!
return indexPath
}
然后在解除转场中实现 放回原位置的动画
取到 fromVC 就是当前的图片浏览器控制
然后 用pictureView 算出indexPath 所在的位置
动画设置图片的目标位置
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
// MainViewController 弹出视图的控制器
// let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
// 要展现的控制器
// let toVc = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
if isPresent {
let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
transitionContext.containerView()?.addSubview(presentPicView)
// toView.alpha = 0.0
let fromRect = pictureView?.cellScreenFrame(picIndexP!)
let toRect = pictureView?.cellDesFrame(picIndexP!)
presentPicView.frame = fromRect!
UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
// toView.alpha = 1.0
self.presentPicView.frame = toRect!
}) { (_) in
self.presentPicView.removeFromSuperview()
transitionContext.containerView()?.addSubview(toView)
// 此方法必须实现（API 注明）
// 动画结束之后一定要执行，如果不执行，系统会一直等待，无法进行后续交互
transitionContext.completeTransition(true)
}
} else {
// 解除转场的时候 fromVc 是 present出来的控制器 反了一下
let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! PhotoBrowerController
let indexPath = fromVc.currentIndexPath()
let desRect = pictureView!.cellScreenFrame(indexPath)
let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
fromView.frame = desRect
}, completion: { (_) in
fromView.removeFromSuperview()
// 解除转场 会把容器视图和内部视图 销毁
transitionContext.completeTransition(true)
})
}
}
运行结果发现并不是我们所想
结束后的位置 并不是我们之前想要的位置
将collectionView 添加上黑色背景观察
发现动的 是整体的大view在动 不是单纯的图片在动
所以要取到这个单独的图片
// MARK: - 当前显示的图片
func currentImageView() -> UIImageView {
let cell = collectionView.cellForItemAtIndexPath(currentIndexPath()) as! PhotoBrowerCell
return cell.imageView
}
- 先获取到显示的图片 添加到转场上下文的容器视图 然后将fromView 也就是添加在视图上的大view 从容器视图中移除
- 动画中设置 图片的目标frame 完成后 将 图片移除
// 解除转场的时候 fromVc 是 present出来的控制器 反了一下
let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! PhotoBrowerController
let indexPath = fromVc.currentIndexPath()
let desRect = pictureView!.cellScreenFrame(indexPath)
let showImageView = fromVc.currentImageView()
transitionContext.containerView()?.addSubview(showImageView)
let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
fromView.removeFromSuperview()
UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
showImageView.frame = desRect
}, completion: { (_) in
showImageView.removeFromSuperview()
// 解除转场 会把容器视图和内部视图 销毁
transitionContext.completeTransition(true)
})
此时图片会跳一下 在去目标frame
设置下 图片的中心点 位于 fromView 的中心
showImageView.center = fromView.center
此时缩放完成后 会回到中心点 放大下再缩小 因为之前在缩放完成后有复位动作
回到缩放完成方法中 加入条件判断 如果缩放比例小于0.8 直接解除转场 就不要再 复位了
func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
if scale >= 0.8 {
var offsetX = (scrollView.bounds.width - view!.frame.width) * 0.5
offsetX = offsetX < 0 ? 0 : offsetX
var offsexY = (scrollView.bounds.height - view!.frame.height) * 0.5
offsexY = offsexY < 0 ? 0 : offsexY
scrollView.contentInset = UIEdgeInsets(top: offsexY, left: offsetX, bottom: 0, right: 0)
}
// 通知代理缩放结束
photoDelegate?.photoBrowerCellEndZoom()
}
此时看起来都是那么的好 只是放大一张图片后 滑动 滑动 之后的图片放大不了
因为之前的cell 放大后 transform 没有形变恢复
所以要恢复形变
private func resetScrollView() {
scrollView.transform = CGAffineTransformIdentity
scrollView.contentInset = UIEdgeInsetsZero
scrollView.contentSize = CGSizeZero
scrollView.contentOffset = CGPointZero
}
至此 转场动画也就完成了。