View Controller Transition实现京东加购物车效果
程序员文章站
2023-12-16 23:40:10
这篇文章中我们主要来叙述一下上述动画效果的实现方案。主要涉及 view controller 转场动画的知识。
我搭建了个人站点,那里有更多内容,请多多指教。点我哦!...
这篇文章中我们主要来叙述一下上述动画效果的实现方案。主要涉及 view controller 转场动画的知识。
我搭建了个人站点,那里有更多内容,请多多指教。点我哦!!!
presenting a view controller
显示一个 view controller 主要有一下几种方式:
- 使用 segues 自动显示 view controller;
- 使用 showviewcontroller:sender: 和 showdetailviewcontroller:sender: 方法显示 view controller;
- 调用 presentviewcontroller:animated:completion: 方法依模态形式显示 view controller
通过上述方式,我们可以将一个 view controller 显示出来,而对于显示地形式,我们可以使用 uikit 中预定义的形式,也可以自定义(即自定义转场动画)。
customizing the transition animations
自定义转场动画中,主要包含以下几个组件:
- presenting view controller(正在显示的 view controller)
- animator(动画管理者)
- presented view controller(要显示的 view controller)
- transitioning delegate object(转场代理,用来提供 animator 对象)
实现自定义转场动画,通常按照以下几个步骤来完成
- 创建 presented view controller;
- 创建 animator;
- 设置 presented view controller 的 transitioningdelegate 属性,并实现 uiviewcontrollertransitioningdelegate 提供 animator 对象;
- 在 presenting view controller 中调用 presentviewcontroller:animated:completion: 显示 presented view controller;
presented view controller
这里,我们将 presented view controller 本身作为其转场代理,你也可以使用单独的代理对象。
class presentedviewcontroller: uiviewcontroller { let imageview = uiimageview(image: uiimage(named: "jd_add.jpg")) override func viewdidload() { super.viewdidload() // 1.设置 transitioningdelegate(转场代理) transitioningdelegate = self modalpresentationstyle = .custom view.addsubview(imageview) } override func viewdidlayoutsubviews() { super.viewdidlayoutsubviews() imageview.frame = cgrect(x: 0, y: 120, width: uiscreen.main.bounds.width, height: uiscreen.main.bounds.height - 120) } override func touchesbegan(_ touches: set, with event: uievent?) { self.dismiss(animated: true, completion: nil) } }
animator
animator 作为转场动画的管理者,主要负责 presenting 和 dismissing 动画效果。
动画时长
/// 转场动画时长 func transitionduration(using transitioncontext: uiviewcontrollercontexttransitioning?) -> timeinterval { return timeinterval(0.5) }
执行动画
/// 执行转场动画 func animatetransition(using transitioncontext: uiviewcontrollercontexttransitioning) { switch type { case .present: present(transitioncontext: transitioncontext) case .dismiss: dismiss(transitioncontext: transitioncontext) } }
presenting 动画
/// presenting 动画 func present(transitioncontext: uiviewcontrollercontexttransitioning) { /** 1.从转场上下文中取出 presenting/pressented view controller 及容器视图 */ guard let presentingvc = transitioncontext.viewcontroller(forkey: .from) as? viewcontroller else { return } guard let presentedvc = transitioncontext.viewcontroller(forkey: .to) as? presentedviewcontroller else { return } let containerview = transitioncontext.containerview /** 2.设置 presenting view controller 所显示内容的属性 */ // 对 presentingvc 的视图内容截屏,用于 presentedvc 显示出来时的背景 guard let presentingvcviewsnapshot = presentingvc.view.snapshotview(afterscreenupdates: false) else { return } // 隐藏 presentingvc 的 view,并将其截屏添加到 containerview 中 presentingvc.view.ishidden = true containerview.addsubview(presentingvcviewsnapshot) // 改变 presentingvcviewsnapshot 的焦点 presentingvcviewsnapshot.layer.anchorpoint = cgpoint(x: 0.5, y: 1) // 更新 presentingvcviewsnapshot 的 frame presentingvcviewsnapshot.frame = presentingvc.view.frame /** 3.设置 presented view controller 所显示内容的属性 */ presentedvc.view.frame = cgrect(x: 0, y: containerview.bounds.height, width: containerview.bounds.width, height: containerview.bounds.height) containerview.addsubview(presentedvc.view) /** 4.设置 presenting 转场动画 */ uiview.animate(withduration: transitionduration(using: transitioncontext), animations: { // 改变 presentingvcviewsnapshot 的 layer 的 transform,使其绕 x轴 旋转,并改变大小 presentingvcviewsnapshot.layer.transform.m34 = -1 / 100.0 presentingvcviewsnapshot.layer.transform = presentingvcviewsnapshot.layer.transform = catransform3dconcat(catransform3dmakerotation(cgfloat(0.1), 1, 0, 0), catransform3dmakescale(0.85, 0.95, 1)) // 改变 presentedvc 的 view 的 transform presentedvc.view.transform = cgaffinetransform(translationx: 0, y: -containerview.bounds.height) }) { (finished) in // 告知 uikit presenting 转场动画结束(很重要) transitioncontext.completetransition(true) } }
dismissing 动画
/// dismissing 动画 func dismiss(transitioncontext: uiviewcontrollercontexttransitioning) { /** 1.从转场上下文中取出容器视图、presenting/pressented view controller 及其 view 的截屏 */ let containerview = transitioncontext.containerview guard let presentingvc = transitioncontext.viewcontroller(forkey: .from) as? presentedviewcontroller else { return } guard let presentedvc = transitioncontext.viewcontroller(forkey: .to) as? viewcontroller else { return } let subviewscount = containerview.subviews.count let presentedvcviewsnapshot = containerview.subviews[subviewscount - 2] /** 2.设置 dismissing 转场动画 */ uiview.animate(withduration: transitionduration(using: transitioncontext), animations: { // 将 presentedvcviewsnapshot 的 transform 恢复到初始值 presentedvcviewsnapshot.layer.transform = catransform3didentity // 将 presentedvc 的 view 的 transform 恢复到初始值 presentingvc.view.transform = cgaffinetransform.identity }) { (finished) in // 使 presentedvc 的 view 显示出来,并隐藏其截屏 presentedvc.view.ishidden = false presentedvcviewsnapshot.removefromsuperview() // 告知 uikit dismissing 转场动画结束(很重要) transitioncontext.completetransition(true) } }
transitioning delegate
// mark: - 2.实现 uiviewcontrollertransitioningdelegate 提供 animator extension presentedviewcontroller: uiviewcontrollertransitioningdelegate { /// present func animationcontroller(forpresented presented: uiviewcontroller, presenting: uiviewcontroller, source: uiviewcontroller) -> uiviewcontrolleranimatedtransitioning? { return myanimator(type: .present) } /// dismiss func animationcontroller(fordismissed dismissed: uiviewcontroller) -> uiviewcontrolleranimatedtransitioning? { return myanimator(type: .dismiss) } } present @ibaction func present() { let presentedvc = presentedviewcontroller() present(presentedvc, animated: true, completion: nil) }
关于 view controller transition 就介绍到这里,你应该熟悉了其使用方法,至于博客中的动画效果,我想就没办法深究了,这是一个花费时间苦差事。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!