如何解决macOS Swift中NSVisualEffectView模糊状态无动画问题

问题描述 #

在macOS Swift环境下，通过AppDelegate创建了包含NSVisualEffectView模糊视图的窗口，点击按钮可切换模糊视图的.active/.inactive状态，但即便使用了animator()，状态切换仍无动画效果。

原代码如下：

class AppDelegate: NSObject, NSApplicationDelegate {
    
    var window: NSWindow = NSWindow()
    var blurView: NSVisualEffectView = NSVisualEffectView()
    
    func applicationDidFinishLaunching(_ aNotification: Notification) {
        
        window.styleMask = [.titled, .closable, .miniaturizable, .resizable]
        window.backingType = .buffered
        window.title = "Window"
        
        let backgroundView: NSView = NSView()
        backgroundView.wantsLayer = true
        
        blurView.wantsLayer = true
        blurView.blendingMode = .behindWindow
        blurView.material = .popover
        blurView.state = .active
        backgroundView.addSubview(blurView)
        
        blurView.translatesAutoresizingMaskIntoConstraints = false
        blurView.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor).isActive = true
        blurView.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor).isActive = true
        blurView.widthAnchor.constraint(equalTo: backgroundView.widthAnchor).isActive = true
        blurView.heightAnchor.constraint(equalTo: backgroundView.heightAnchor).isActive = true
        
        let myButton1: NSButton = NSButton()
        myButton1.bezelStyle = .rounded
        backgroundView.addSubview(myButton1)
        myButton1.translatesAutoresizingMaskIntoConstraints = false
        myButton1.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor, constant: -70).isActive = true
        myButton1.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor).isActive = true
        myButton1.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        myButton1.title = "inactive"
        myButton1.action = #selector(myButton1Action)
        
        
        let myButton2: NSButton = NSButton()
        myButton2.bezelStyle = .rounded
        backgroundView.addSubview(myButton2)
        myButton2.translatesAutoresizingMaskIntoConstraints = false
        myButton2.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor, constant: 70).isActive = true
        myButton2.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor).isActive = true
        myButton2.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        myButton2.title = "active"
        myButton2.action = #selector(myButton2Action)
        
        window.contentView = backgroundView
        
        window.center()
        window.setFrameAutosaveName("Main Window")
        window.isMovableByWindowBackground = true
        window.makeKeyAndOrderFront(window)
        
    }
    
    @objc private func myButton1Action() {
        print("inactive!")
        
        blurView.animator().state = .inactive
    }
    
    @objc private func myButton2Action() {
        print("active!")
        
        blurView.animator().state = .active
        
    }
    
}

解决方法 #

核心原因 #

NSVisualEffectView的state属性不属于系统默认支持隐式动画的属性，直接调用animator()无法触发过渡动画，需要显式创建动画上下文来驱动状态变化。同时手动设置wantsLayer = true会干扰视图内部的层管理逻辑，需移除该设置。

修改后的代码 #

class AppDelegate: NSObject, NSApplicationDelegate {
    
    var window: NSWindow = NSWindow()
    var blurView: NSVisualEffectView = NSVisualEffectView()
    
    func applicationDidFinishLaunching(_ aNotification: Notification) {
        
        window.styleMask = [.titled, .closable, .miniaturizable, .resizable]
        window.backingType = .buffered
        window.title = "Window"
        
        let backgroundView: NSView = NSView()
        backgroundView.wantsLayer = true
        
        // 移除blurView的wantsLayer设置，NSVisualEffectView默认基于层渲染
        blurView.blendingMode = .behindWindow // 若动画异常可尝试改为.withinWindow
        blurView.material = .popover
        blurView.state = .active
        backgroundView.addSubview(blurView)
        
        blurView.translatesAutoresizingMaskIntoConstraints = false
        blurView.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor).isActive = true
        blurView.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor).isActive = true
        blurView.widthAnchor.constraint(equalTo: backgroundView.widthAnchor).isActive = true
        blurView.heightAnchor.constraint(equalTo: backgroundView.heightAnchor).isActive = true
        
        let myButton1: NSButton = NSButton()
        myButton1.bezelStyle = .rounded
        backgroundView.addSubview(myButton1)
        myButton1.translatesAutoresizingMaskIntoConstraints = false
        myButton1.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor, constant: -70).isActive = true
        myButton1.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor).isActive = true
        myButton1.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        myButton1.title = "inactive"
        myButton1.action = #selector(myButton1Action)
        
        
        let myButton2: NSButton = NSButton()
        myButton2.bezelStyle = .rounded
        backgroundView.addSubview(myButton2)
        myButton2.translatesAutoresizingMaskIntoConstraints = false
        myButton2.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor, constant: 70).isActive = true
        myButton2.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor).isActive = true
        myButton2.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        myButton2.title = "active"
        myButton2.action = #selector(myButton2Action)
        
        window.contentView = backgroundView
        
        window.center()
        window.setFrameAutosaveName("Main Window")
        window.isMovableByWindowBackground = true
        window.makeKeyAndOrderFront(window)
        
    }
    
    @objc private func myButton1Action() {
        print("inactive!")
        // 显式创建动画上下文，定义动画时长
        NSAnimationContext.runAnimationGroup { context in
            context.duration = 0.3
            blurView.animator().state = .inactive
        }
    }
    
    @objc private func myButton2Action() {
        print("active!")
        NSAnimationContext.runAnimationGroup { context in
            context.duration = 0.3
            blurView.animator().state = .active
        }
    }
    
}

关键修改点 #

• 移除blurView.wantsLayer = true：NSVisualEffectView本身是基于层的视图，手动设置会干扰系统动画逻辑。
• 使用NSAnimationContext.runAnimationGroup包裹状态切换：显式定义动画时长等参数，驱动state属性变化的平滑过渡。
• 可选调整blendingMode：若.behindWindow模式下动画仍有异常，可切换为.withinWindow，该模式在窗口内容层内渲染，动画兼容性更好。

内容的提问来源于stack exchange，提问作者swiftPunk