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，而是在抽屉视图本身上安装。

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

这是我的实施：

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上面！

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

2 个答案: