如何实现NSTrackingArea的mouseEntered /退出动画？

Question

我想实现一个功能,当用户将鼠标悬停在特定区域上时,新视图将显示为类似抽屉的动画.而且,当用户离开特定区域时,抽屉应该消失动画.这正是您在OS X中悬停在屏幕底部时看到的内容,其中Dock出现并随动画消失.

但是,如果我使用动画实现该功能,则在完成动画之前重新进入特定区域时,它将无法正常工作mouseExited:.这是我的代码:

let trackingArea = NSTrackingArea(rect: CGRectMake(0, 0, 120, 300), options: NSTrackingAreaOptions.ActiveAlways | NSTrackingAreaOptions.MouseEnteredAndExited, owner: self, userInfo: nil)
underView.addTrackingArea(trackingArea) // underView is the dummy view just to respond to the mouse tracking, since the drawerView's frame is changed during the animation; not sure if this is the clean way...

override func mouseEntered(theEvent: NSEvent) {
    let frameAfterVisible = CGRectMake(0, 0, 120, 300)
    NSAnimationContext.runAnimationGroup({
        (context: NSAnimationContext!) in
            context.duration = 0.6
            self.drawerView.animator().frame = frameAfterVisible
        }, completionHandler: { () -> Void in
    })
}

override func mouseExited(theEvent: NSEvent) {
    let frameAfterInvisible = CGRectMake(-120, 0, 120, 300)
    NSAnimationContext.runAnimationGroup({
        (context: NSAnimationContext!) in
            context.duration = 0.6
            self.drawerView.animator().frame = frameAfterInvisible
        }, completionHandler: { () -> Void in
    })
}

// drawerView's frame upon launch is (-120, 0, 120, 300), since it is not visible at first

在这段代码中,我drawerView通过改变它的x位置来制作动画.但是,正如我所说,当您进入跟踪区域然后离开跟踪区域时,抽屉正常工作.但是,如果您在完全停止动画之前重新进入跟踪区域,则情况并非如此.

当然,如果我将动画持续时间设置得更短,例如0.1,这种情况很少发生.但我想用动画移动视图.

我想要做的是即使视图没有完成消失,也要让drawerView开始再次出现.有没有做过的练习？

Answer 1

我有一个与您的代码非常相似的解决方案.我做的不同之处在于我NSTrackingArea在包含抽屉视图的视图上安装了not,但是在抽屉视图本身上.

这显然意味着抽屉需要"伸出"一点点.在我的情况下,抽屉在下降时是一小部分可见,因为我在其中放置了一个图像视图.如果您不想那样,那么我建议您将抽屉的可见区域留空且半透明.

这是我的实现:

private enum DrawerPosition {
    case Up, Down
}

private let DrawerHeightWhenDown: CGFloat = 16
private let DrawerAnimationDuration: NSTimeInterval = 0.75

class ViewController: NSViewController {

    @IBOutlet weak var drawerView: NSImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Remove the auto-constraints for the image view otherwise we are not able to change its position
        view.removeConstraints(view.constraints)
        drawerView.frame = frameForDrawerAtPosition(.Down)

        let trackingArea = NSTrackingArea(rect: drawerView.bounds,
            options: NSTrackingAreaOptions.ActiveInKeyWindow|NSTrackingAreaOptions.MouseEnteredAndExited,
                owner: self, userInfo: nil)
        drawerView.addTrackingArea(trackingArea)
    }

    private func frameForDrawerAtPosition(position: DrawerPosition) -> NSRect {
        var frame = drawerView.frame
        switch position {
        case .Up:
            frame.origin.y = 0
            break
        case .Down:
            frame.origin.y = (-frame.size.height) + DrawerHeightWhenDown
            break
        }
        return frame
    }

    override func mouseEntered(event: NSEvent) {
        NSAnimationContext.runAnimationGroup({ (context: NSAnimationContext!) in
            context.duration = DrawerAnimationDuration
            self.drawerView.animator().frame = self.frameForDrawerAtPosition(.Up)
        }, completionHandler: nil)
    }

    override func mouseExited(theEvent: NSEvent) {
        NSAnimationContext.runAnimationGroup({ (context: NSAnimationContext!) in
            context.duration = DrawerAnimationDuration
            self.drawerView.animator().frame = self.frameForDrawerAtPosition(.Down)
        }, completionHandler: nil)
    }
}

完整项目在https://github.com/st3fan/StackOverflow-28777670-TrackingArea

如果这有用,请告诉我.很高兴做出改变.

Answer 2

启动Swift 3.您需要这样做:

let trackingArea = NSTrackingArea(rect: CGRectMake(0, 0, 120, 300), options: [NSTrackingAreaOptions.ActiveAlways ,NSTrackingAreaOptions.MouseEnteredAndExited], owner: self, userInfo: nil)
view.addTrackingArea(trackingArea)

积分@marc上面!