如何实现NSTrackingArea的鼠标进入/退出动画？

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

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

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

我想做的是使drawerView再次出现，即使视图尚未完全消失。有什么练习吗？

Answer 1

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

这显然意味着抽屉需要"伸出"一点。在我的情况下，抽屉放下时有点可见，因为我在里面放了一个图像视图。如果你不想这样，我建议你把抽屉的可见区域留空，保持半透明。

这是我的实现：

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！