前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Mac开发跬步积累(二):NSViewController 转场动画精耕细作

Mac开发跬步积累(二):NSViewController 转场动画精耕细作

作者头像
代码行者
发布2018-08-23 11:10:29
2.5K0
发布2018-08-23 11:10:29
举报

图片来自网络

iOS相比,在macOS中,控制器的转场情景相对要简洁一些,没有iOS中导航控制器的PushPop动画以及边缘返回手势, 保留下的Present方式,倒是提供了特有的切换方式, 可以供我们使用出许多效果.

关于NSViewController基础细节,有兴趣的同学可以参考我的Mac开发基础教程这个系列的教程,友情提示: 自学能力好的同学可以参考github中的课程代码.另外一门macOS 应用开发进阶课程,供有项目经验或对组件化感兴趣的同学参考.

0x00 : extension NSViewController

macOS 10.10之后,关于NSViewController,苹果公司专门在一个extension中提供了四个方法用来处理控制器之间的关系以及切换转场处理.

   1. 内嵌在同一个窗口中形式弹出新的ViewController
    open func presentViewControllerAsSheet(_ viewController: NSViewController)
    
   2. 新窗口的形式弹出新的ViewController
    open func presentViewControllerAsModalWindow(_ viewController: NSViewController)

   3. Popover的形式弹出新的ViewController
    open func presentViewController(_ viewController: NSViewController, asPopoverRelativeTo positioningRect: NSRect, of positioningView: NSView, preferredEdge: NSRectEdge, behavior: NSPopover.Behavior)

   4. 从fromViewController转换到toViewController
    open func transition(from fromViewController: NSViewController, to toViewController: NSViewController, options: NSViewController.TransitionOptions = [], completionHandler completion: (() -> Swift.Void)? = nil)

0x01 : present 与 transition

在上面的系统提供的NSViewController四个方法中,可以分为presenttransition两种方式:

  • presentXXX: 所有的present方式都是通过调用 presentViewController(NSViewController, animator: Animator)这个方法来完成展示的,并提供一个遵守NSViewControllerPresentationAnimator协议的animator控制整个动画过程. <如果希望实现自定义的Present转场效果,可以通过自定义animator方式后面会讲到具体实现步骤>
  • transition: 使用一个容器视图Contain View, 通过addSubViewremoveSubView的方式实现两个控制器之间的动画切换展示,系统提供了下面8中过渡动画方式:
 @available(OSX 10.10, *)
    public struct TransitionOptions : OptionSet {

        public static var crossfade: NSViewController.TransitionOptions { get }
        
        public static var slideUp: NSViewController.TransitionOptions { get }

        public static var slideDown: NSViewController.TransitionOptions { get }

        public static var slideLeft: NSViewController.TransitionOptions { get }

        public static var slideRight: NSViewController.TransitionOptions { get }

        public static var slideForward: NSViewController.TransitionOptions { get }

        public static var slideBackward: NSViewController.TransitionOptions { get }

        public static var allowUserInteraction: NSViewController.TransitionOptions { get }
    }
crossfade 效果

crossfade效果

slideUp/slideDown 效果

slideUp/slideDown 效果

slideLeft/slideRight (slideForward/slideBackward ) 效果

slideLeft/slideRight (slideForward/slideBackward ) 效果

allowUserInteraction 效果

allowUserInteraction 效果

0x02 : transition 细节:

在进行transition时,所有需要切换的child ViewController必须是同一个 super ViewController,否则会抛出异常错误.

  1. transition方法仅支持有父子关系的控制器结构.
  2. transition由父控制器super ViewController进行调用.
  3. transition仅在子控制器child ViewController之间进行切换.
  4. transition方法中,fromViewcontroller 的视图必须有superView,否则抛出异常.

0x03: transition Demo

示例代码: TransAnimationController demo

  1. 搭建UI界面:

构建UI界面

  1. 代码部分:
class ViewController: NSViewController {
 
1. 从Storyboard中的CustomView 连线的控件属性,用来作为容器视图,显示每个ChildViewController的内容      
    @IBOutlet weak var containView: MYContainView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
2. 添加需要切换的子控制器: RedController 和BlueController 为自定义的两个控制器,仅显示不同的视图颜色.
        addChildViewController(RedController())
        addChildViewController(BlueController())
3. 需要将第一个ChildViewController的view添加到容器视图中;
        containView.addSubview(childViewControllers[0].view)
4. 设置容器视图的颜色
        containView.layer?.backgroundColor = NSColor.orange.cgColor
    
    }
5. 点击下一个按钮, 从RedController 切换到BlueController
    @IBAction func clickBtn(_ sender: Any) {
        transition(from: childViewControllers[0], to: childViewControllers[1], options: .slideLeft, completionHandler: nil)
    }
6. 点击上一个按钮, 从BlueController 切换到RedController
    @IBAction func clickUpButton(_ sender: Any) {
        transition(from: childViewControllers[1], to: childViewControllers[0], options: .slideRight, completionHandler: nil)
    }
}
6. 修改4,5 步骤中的option 参数,可以实现不同的transition 效果.

0x04 : Present 动画效果

  • presentViewControllerAsSheet @IBAction func presentTest(_ sender: Any) { 1. 创建控制器 let greenVC = GreenController() 2. 以AsSheet方式弹出控制器 presentViewControllerAsSheet(greenVC) }

AsSheet

  • presentViewControllerAsModalWindow
 @IBAction func presentTest(_ sender: Any) {
        let greenVC = GreenController()
       1. 以AsSheet方式弹出控制器
        presentViewControllerAsModalWindow(greenVC)
    }

AsModalWindow

  • presentViewControllerAsPopover
        let greenVC = GreenController()
       1. 以Popover方式弹出控制器
        presentViewController(greenVC, asPopoverRelativeTo: sender.bounds, of: sender, preferredEdge: NSRectEdge.maxX, behavior: NSPopover.Behavior.transient)

Jul-28-2018 20-56-14.gif

0x05 Present 自定义动画( 划重点)

  1. 自定义一个遵守NSViewControllerPresentationAnimator 协议的对象
  2. 实现NSViewControllerPresentationAnimator的两个方法
public protocol NSViewControllerPresentationAnimator : NSObjectProtocol {
1. present 动画时,执行这个方法,因此在这个方法中实现自定义的动画效果
    public func animatePresentation(of viewController: NSViewController, from fromViewController: NSViewController)

2. dismiss动画时,执行这个方法 ,在这个方法中可以实在自定义的动画效果
    public func animateDismissal(of viewController: NSViewController, from fromViewController: NSViewController)
}
  1. 在需要执行Present的地方调用presentViewController(ViewController, animator: )
class PresentAnimator: NSObject {
  
}
// MARK:  NSViewControllerPresentationAnimator
extension PresentAnimator: NSViewControllerPresentationAnimator{
    func animatePresentation(of viewController: NSViewController, from fromViewController: NSViewController) {
        // 这里实现present的动画效果
        /**viewController: 将要被present出来的视图控制器, fromViewcontroller --> presented动作 ---> viewController */
        1. 获取容器view
        let containerView = fromViewController.view
        
        2. 计算最终显示的frame
        let finalFrame = NSInsetRect(containerView.bounds, 50, 50)
        3. 需要显示的view
        let modalView = viewController.view
        
        4. 设置将要显示视图的初始frame
        modalView.frame = finalFrame
        modalView.setFrameOrigin(NSMakePoint(finalFrame.origin.x, finalFrame.origin.y - 200))

        5 .添加视图到容器视图中
        containerView.addSubview(modalView)

        6. 执行动画效果
        NSAnimationContext.runAnimationGroup({ (animationContext) in
            animationContext.duration = 0.5
            modalView.animator().frame = finalFrame
            
        }, completionHandler: nil)    
    }
    
    func animateDismissal(of viewController: NSViewController, from fromViewController: NSViewController) {
        // 这里实现dismiss时的动画效果
        1. 获取开始动画的frame
        let startFrame = viewController.view.frame
        2. 执行动画
        NSAnimationContext.runAnimationGroup({ (animationContext) in
            animationContext.duration = 0.5
            viewController.view.animator().setFrameOrigin(NSMakePoint(startFrame.origin.x, startFrame.origin.y - fromViewController.view.bounds.size.height - 100))
        }) {
       3. 动画完成后,移除子视图
            viewController.view.removeFromSuperview()
        }
    }
}
  • 示例效果:

自定义present 动画效果

Summary(总结)

  1. macOS中,控制器的转场切换无论是presentViewController方式或者transition方式,本质上都是将要显示的控制器视图View,通过addSubView方法添加到容器视图中展示.
  2. 通常开发中如果没有特殊需求,transition的系统样式基本都可以满足使用.
  3. 自定义present 动画时,需要注意事件穿透问题:
    • 由于显示出来的控制器视图(Controller View)是通过addSubView方式添加到容器视图中,因此在控制器视图(Controller View)上进行点击操作,可能会触发容器视图中控件(比如按钮)的方法
    • 解决办法: 给容器视图添加一层背景视图(自定义的NSView, 重写mouseDown方法即可),通过背景视图屏蔽鼠标操作,防止事件穿透到容器视图中

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.07.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 0x00 : extension NSViewController
  • 0x01 : present 与 transition
  • 0x02 : transition 细节:
  • 0x03: transition Demo
  • 0x04 : Present 动画效果
  • 0x05 Present 自定义动画( 划重点)
  • Summary(总结)
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档