How can I change the visibility of ornament with animation?

In the session around 19:15, the ornament for the app is displayed with fade animation. How can I achieve this? I can control the visibility using

ornament(visibility:attachmentAnchor:contentAlignment:ornament:)

with .visible or .hidden, but no animation.

Adding .transition to the content view also does have no effect.

  • What happens if you change the visibility in a “withAnimation” block?

  • When showing ornament view by changing the flag in "withAnimation", it shows weird movement (translate from somewhere upper left). When hiding, no animation. Apparently doing something but not correct movement.

Add a Comment

Replies

I've managed to animate in the visibility using opacity:

.ornament(visibility: .visible, attachmentAnchor: .scene(alignment: .bottom)) {
    OrnamentView()
        .opacity(showingOrnament ? 1.0 : 0.0)
        .animation(.spring(duration:2), value: showingOrnament)
}

I haven't yet figured out a way to cause the window move/close handle to re-distance itself from the associated window once the ornament is hidden, but there may be a way to made the ornament hidden after the opacity animation is completed.

  • Great. This worked with animation. But because the ornament is there transparently, there's a space between window and the bar (displayed in the bottom of window to move window) placed as if there is an ornament. (Actually it is). There might be better way to control the visibility of ornament but for now I move on with this approach. Thanks.

Add a Comment