实现一个复杂动画的界面转场(Swift)
效果图项目地址:ImageMaskTransition 转场原理对于模态展示(Modal)iOS 8之后,可以通过设置ViewController的转场代理 transitioningDelegate 这个转场代理是一个协议类型 // MARK: - UIViewControllerTransitioningDelegate -
func animationControllerForPresentedController(presented: UIViewController,presentingController presenting: UIViewController,sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
//这里返回present的动画
}
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
//这里返回dismiss的动
}
对于NavigationController来说,则可以设置NavigationController的delegate来返回自定义的动画。navigationController.delegate
这里的 //返回动画
func navigationController(navigationController: UINavigationController,animationControllerForOperation operation: UINavigationControllerOperation,fromViewController fromVC: UIViewController,toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
switch operation {
case .Pop:
//返回Pop时候
case .Push:
//返回Push时候的动画
default:
return nil
}
}
细心的朋友应该发现了,不管是模态还是Push,都是返回一个 通用的Animator定义一个类,让其遵循 class ImageMaskAnimator: NSObject,UIViewControllerAnimatedTransitioning {}
由于实现了 func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
//这里返回动画的时间
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
//这里进行实际的动画
}
转场的原理在上文提到的 let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
let containView = transitionContext.containerView()!
其中,关系如图
所以,开发者要做的就是
用CIFilter截图并添加高斯模糊细心的朋友能看到,在最上面转场的时候,不管是present还是dismiss,第一个Controller的看起来都是”模糊”的。其实是采用截图,然后添加一个 extension UIView{
func blurScreenShot(blurRadius:CGFloat)->UIImage?{
guard self.superview != nil else{
return nil
}
UIGraphicsBeginImageContextWithOptions(CGSize(width: frame.width,height: frame.height),false,1)
layer.renderInContext(UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext();
guard let blur = CIFilter(name: "CIGaussianBlur") else{
return nil
}
blur.setValue(CIImage(image: image),forKey: kCIInputImageKey)
blur.setValue(blurRadius,forKey: kCIInputRadiusKey)
let ciContext = CIContext(options: nil)
let result = blur.valueForKey(kCIOutputImageKey) as! CIImage!
let boundingRect = CGRect(x:0,y: 0,width: frame.width,height: frame.height)
let cgImage = ciContext.createCGImage(result,fromRect: boundingRect)
let filteredImage = UIImage(CGImage: cgImage)
return filteredImage
}
}
Tips:在模拟器上,CIFilter的效率很差,但是真机上很快 Present/Push动画过程首先,我们要做一些准备工作,其中,核心是坐标系转换 Tips: #if
//...
#else
..
#endif
整个动画的准备过程 //获取必要参数
let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
let containView = transitionContext.containerView()!
let frame = UIScreen.mainScreen().bounds
maskContentView = UIImageView(frame: frame)
maskContentView.backgroundColor = UIColor.lightGrayColor()
//如果是Present或者push
if self.transitionType == .Present {
//模拟器上禁用Blur
#if (arch(i386) || arch(x86_64)) && os(iOS)
print("Wow,CIFilter is too slow on simulator,So I disable blur on Simulator")
#else
//截图,生成blur
self.blurImage = fromView.blurScreenShot(3.0)
maskContentView.image = fromView.blurScreenShot(3.0)
#endif
//Blur作为背景,添加到ContainView
maskContentView.frame = containView.bounds
containView.addSubview(self.maskContentView)
let fromImageView = self.config.fromImageView
//Frame的坐标系适配
let adjustFromRect = fromImageView.convertRect(fromImageView.bounds,toView: containView)
let toImageView = self.config.toImageView!
let adjustToRect = toImageView.convertRect(toImageView.bounds,toView: containView)
//添加一个ImageView,来显示动画
imageView = UIImageView(frame: adjustFromRect)
imageView.image = fromImageView.image
containView.addSubview(imageView)
//设置阴影
imageView.layer.shadowColor = UIColor.blackColor().CGColor
imageView.layer.shadowOffset = CGSizeMake(2.0,2.0)
imageView.layer.shadowRadius = 10.0
imageView.layer.shadowOpacity = 0.8
//开始动画
//动画代码....
到这里,视图的层次结构如下
整个Present的动画分为三个部分 //第一步,移动ImageView到toView的对应Frame,同时变化Scale
UIView.animateWithDuration(0.5 / 1.6 * self.config.presentDuration,animations: {
self.imageView.frame = adjustToRect
self.imageView.transform = CGAffineTransformMakeScale(1.2,1.2)
}) { (finished) in
//第二步,恢复ImageView的Transfrom
UIView.animateWithDuration(0.3 / 1.6 * self.config.presentDuration,animations: {
self.imageView.transform = CGAffineTransformIdentity
self.imageView.layer.shadowOpacity = 0.0
}) { (finished) in
//第三步,添加toView,然后开始mask动画
containView.addSubview(toView)
containView.bringSubviewToFront(self.imageView)
let adjustFrame = self.imageView.convertRect(self.imageView.bounds,toView: self.maskContentView)
toView.maskFrom(adjustFrame,duration: 0.8 / 1.6 * self.config.presentDuration,complete: {
//所有动画完成,进行清理
self.maskContentView.removeFromSuperview()
self.imageView.removeFromSuperview()
self.maskContentView = nil
self.imageView = nil
//通知上下文,转场完成
transitionContext.completeTransition(true)
})
}
}
在最后一步进行Mask的时候,视图的层次如下
Mask动画Mask动画其实比较简单,我们都知道CALayer有一个
代码如下 maskLayer.path = toPath.CGPath
let basicAnimation = CABasicAnimation(keyPath: "path")
basicAnimation.duration = duration
basicAnimation.fromValue = fromPath.CGPath
basicAnimation.toValue = toPath.CGPath
basicAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaSEOut)
maskLayer.addAnimation(basicAnimation,forKey: "pathMask")
self.layer.mask = maskLayer
其中,fromPath是开始的圆环,toPath是结束的圆环。 圆环的绘制采用贝赛尔曲线 let fromPath = UIBezierPath(arcCenter: fromCenter,radius: fromRadius,startAngle: 0,endAngle: CGFloat(M_PI) * 2,clockwise: true)
事务这里用事务进行包裹,进而在动画完成的时候进行反馈 CATransaction.begin()
CATransaction.setCompletionBlock {
//这里动画完成了
}
//上文的Mask代码
CATransaction.commit()
Dismiss/Pop的原理类似,不再赘述 最后完整代码地址:ImageMaskTransition (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |