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:
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user