Schließen entruckeln: Material fest, Maske animiert, Zeiger abgefragt

Drei Ursachen, davon zwei echte Fehler.

Die NSVisualEffectView steckte in einem Rahmen, dessen Größe animiert wurde.
Ein Weichzeichner muss dann in jedem Einzelbild neu in anderer Größe gerechnet
werden — am teuersten genau beim Schließen, wo die Fläche am schnellsten
schrumpft. Das Material behält jetzt feste Größe, animiert wird nur die Maske
davor. Tint, Bänderung und Kante sind reine SwiftUI-Formen und dürfen weiter in
der Größe animieren. Auch die Schattendeckkraft ist jetzt konstant statt
animiert; sie aufzublenden kostete pro Bild eine neue Weichzeichnung.

Onyx bekam Mausbewegungen über dem eigenen Panel praktisch nicht mit. Der
globale Monitor feuert nur für Ereignisse an fremde Programme, der lokale nur
wenn Onyx aktiv ist — was es als .accessory-App nie ist. Ausgerechnet beim
Verlassen des Panels kam das Ereignis also verspätet oder gar nicht. Solange
ein Panel offen ist, wird die Zeigerposition jetzt mit 60 Hz abgefragt; der
Timer läuft ausschließlich in dieser Zeit.

Öffnen und Schließen benutzten dieselbe Kurve. Schließen ist jetzt kürzer und
ohne Nachschwingen: beim Öffnen sieht man zu, beim Schließen ist man schon
woanders.

Nebenbefund beim Prüfen: es liefen zwei Onyx-Instanzen aus verschiedenen Builds
gleichzeitig, jede mit eigener Zustandsmaschine auf derselben Notch. Das dürfte
einen guten Teil der Hakeligkeit erklärt haben.
This commit is contained in:
Guido Schmit
2026-08-10 17:52:42 +02:00
parent 65f9fbfa4e
commit 0297b3ad0d
5 changed files with 143 additions and 45 deletions

View File

@@ -29,8 +29,9 @@ public final class NotchPresentation {
}
/// Wie lange das Einfahren braucht, bis das Fenster gefahrlos verschwinden darf.
/// Der Spring schwingt nach; zu früh entfernt reißt das Panel sichtbar weg.
public static let collapseDuration: TimeInterval = 0.42
/// Muss zu `Onyx.Motion.collapse` passen: zu früh entfernt reißt das Panel
/// sichtbar weg, zu spät bleibt ein unsichtbares Fenster im Weg stehen.
public static let collapseDuration: TimeInterval = 0.30
}
/// Der Rahmen, der aus der Notch herauswächst.
@@ -60,40 +61,72 @@ public struct NotchContainer<Content: View>: View {
presentation.isExpanded ? Onyx.Metric.panelCornerRadius : 10
}
private var shapeAnimation: Animation {
presentation.isExpanded ? Onyx.Motion.expand : Onyx.Motion.collapse
}
public var body: some View {
let shape = RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
ZStack(alignment: .top) {
OnyxSurface(cornerRadius: cornerRadius)
.frame(width: size.width, height: size.height)
.shadow(color: .black.opacity(presentation.isExpanded ? 0.45 : 0),
radius: 22, y: 10)
.overlay(alignment: .top) {
content
.frame(width: presentation.expandedSize.width,
height: presentation.expandedSize.height
- presentation.contentTopInset,
alignment: .top)
// Freiraum für die Notch. Padding statt Offset, damit
// der Inhalt auch beim Messen die richtige Höhe hat.
.padding(.top, presentation.contentTopInset)
.opacity(presentation.isExpanded ? 1 : 0)
// Ein Hauch von oben herangleiten genug, um Richtung zu
// geben, zu wenig, um als Bewegung aufzufallen.
.offset(y: presentation.isExpanded ? 0 : -8)
.allowsHitTesting(presentation.isExpanded)
.clipped()
// Das Weichzeichner-Material behält **feste** Größe; animiert wird
// nur die Maske davor.
//
// Eine NSVisualEffectView in einem animierten Rahmen muss ihren
// Weichzeichner in jedem Einzelbild neu in anderer Größe berechnen
// das ruckelt sichtbar, und zwar genau beim Schließen, wo die Fläche
// am schnellsten schrumpft. Eine Maske kostet dagegen nichts.
OnyxVisualEffect()
.frame(width: presentation.expandedSize.width,
height: presentation.expandedSize.height)
.mask(alignment: .top) {
shape.frame(width: size.width, height: size.height)
}
.animation(Onyx.Motion.expand, value: presentation.isExpanded)
// Tint, Bänderung und Kante sind reine SwiftUI-Formen. Die dürfen
// in der Größe animieren, das kostet nichts.
shape
.fill(Onyx.Color.surface.opacity(Onyx.Color.surfaceOpacity))
.overlay {
shape.fill(
LinearGradient(
stops: [.init(color: .white.opacity(0.02), location: 0),
.init(color: .clear, location: 0.4)],
startPoint: .top, endPoint: .bottom))
}
.overlay { shape.strokeBorder(Onyx.Color.hairline, lineWidth: 1) }
.frame(width: size.width, height: size.height)
// Konstante Deckkraft: einen Schatten aufzublenden kostet in
// jedem Einzelbild eine neue Weichzeichnung. Er schrumpft
// ohnehin mit der Form mit.
.shadow(color: .black.opacity(0.45), radius: 22, y: 10)
content
.frame(width: presentation.expandedSize.width,
height: presentation.expandedSize.height
- presentation.contentTopInset,
alignment: .top)
// Freiraum für die Notch. Padding statt Offset, damit der
// Inhalt auch beim Messen die richtige Höhe hat.
.padding(.top, presentation.contentTopInset)
.opacity(presentation.isExpanded ? 1 : 0)
// Ein Hauch von oben herangleiten genug, um Richtung zu geben,
// zu wenig, um als Bewegung aufzufallen.
.offset(y: presentation.isExpanded ? 0 : -8)
.allowsHitTesting(presentation.isExpanded)
.clipped()
// Eigene Kurve: beim Öffnen verzögert, damit die Fläche vorweg
// läuft; beim Schließen sofort weg, damit beim Einfahren nichts
// gestaucht wird.
.animation(presentation.isExpanded
? .easeOut(duration: 0.20).delay(0.08)
: .easeIn(duration: 0.08),
value: presentation.isExpanded)
}
.frame(width: presentation.expandedSize.width,
height: presentation.expandedSize.height,
alignment: .top)
// Der Inhalt hat eine eigene Kurve: beim Öffnen verzögert, damit die
// Fläche vorweg läuft; beim Schließen sofort, damit nichts beim
// Einfahren gestaucht wird.
.animation(presentation.isExpanded
? .easeOut(duration: 0.22).delay(0.09)
: .easeIn(duration: 0.10),
value: presentation.isExpanded)
.animation(shapeAnimation, value: presentation.isExpanded)
}
}