How to animate transition when adding view to hierarchy in SwiftUI

andrewz

I am trying to build an overlay of "popover" views and animate transitioning in and out. Transitioning out works, but transitioning in doesn't -- as a popover view is added it just suddenly appears (wrong), but when a popover view is removed it slides out to the right (correct). How can I make the popover slide in (from right) when it's added to the view hierarchy in this code?

Fully functional code in iOS 14.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Popovers()
    }
}

struct Popovers : View {
    
    @State var popovers : [AnyView] = []
    
    var body : some View {
        Button("Add a view ...") {
            withAnimation {
                popovers += [new()]
            }
        }
        .blur(radius: 0 < popovers.count ? 8 : 0)
        .overlay(ZStack {
            ForEach(0..<self.popovers.count, id: \.self) { i in
                popovers[i]
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .blur(radius: (i+1) < popovers.count ? 8 : 0)
                    .transition(.move(edge: .trailing)) // works only when popover is removed
            }
        })
    }
    
    func new() -> AnyView {
        let popover = popovers.count
        
        return AnyView.init(
            VStack(spacing: 64) {
                
                Button("Close") {
                    withAnimation {
                        _ = popovers.removeLast()
                    }
                }
                .font(.largeTitle)
                .padding()

                Button("Add") {
                    withAnimation {
                        popovers += [new()]
                    }
                }
                .font(.largeTitle)
                .padding()

                Text("This is popover #\(popover)")
                    .font(.title)
                    .foregroundColor(.white)
                    .fixedSize()
                
            }
            .background(Color.init(hue: 0.65-(Double(3*popover)/100.0), saturation: 0.3, brightness: 0.9).opacity(0.98))
        )
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension View {
    var asAnyView : AnyView {
        AnyView(self)
    }
}
Asperi

The solution is to add instead animation to container. Tested with Xcode 12 / iOS 14.

demo

struct Popovers : View {
    
    @State var popovers : [AnyView] = []
    
    var body : some View {
        Button("Add a view ...") {
            withAnimation {
                popovers += [new()]
            }
        }
        .blur(radius: 0 < popovers.count ? 8 : 0)
        .overlay(ZStack {
            ForEach(0..<self.popovers.count, id: \.self) { i in
                popovers[i]
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .blur(radius: (i+1) < popovers.count ? 8 : 0)
                    .transition(.move(edge: .trailing))
            }
        }.animation(.default))    // << add animation to container
    }
    
    func new() -> AnyView {
        let popover = popovers.count
        
        return AnyView.init(
            VStack(spacing: 64) {
                
                Button("Close") {
                            _ = popovers.removeLast()
                }
                .font(.largeTitle)
                .padding()

                Button("Add") {
                            popovers += [new()]
                }
                .font(.largeTitle)
                .padding()

                Text("This is popover #\(popover)")
                    .font(.title)
                    .foregroundColor(.white)
                    .fixedSize()
                
            }
            .background(Color.init(hue: 0.65-(Double(3*popover)/100.0), saturation: 0.3, brightness: 0.9).opacity(0.98))
        )
    }
    
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

How to consume click event in view hierarchy

分類Dev

How to turn off AutoLayout for a view hierarchy programmatically?

分類Dev

How do i make a slow transition for something that you cannot animate?

分類Dev

How to smoothly transition animations between divs using jquery .animate

分類Dev

Lifecycling in SwifUI: Running code when leaving a child view of a NavigationView hierarchy

分類Dev

SwiftUI: How can I restrict the tappable area of a view when presenting a modal(actually not modal) view over a main view?

分類Dev

How to use Combine on a SwiftUI View

分類Dev

How to use Combine on a SwiftUI View

分類Dev

How to animate dynamic List sorting with SwiftUI and CoreData (@FetchRequest)

分類Dev

How do you get view hierarchy in Android or Android Espresso

分類Dev

How can I make view to update when current time passes the threshold in SwiftUI?

分類Dev

SwiftUI: Animate Circles in List

分類Dev

How to animate a 'cloned', duplicate version of existing android View

分類Dev

SwiftUI how to add an Underline to a Text View?

分類Dev

SwiftUI how to add an Underline to a Text View?

分類Dev

How to do navigation control in SwiftUI view

分類Dev

animate path stroke drawing in SwiftUI

分類Dev

Swift - getting back to view that is not in the hierarchy

分類Dev

Adding animate.css on hover

分類Dev

Is there a SwiftUI equivalent for viewWillDisappear(_:) or detect when a view is about to be removed?

分類Dev

Is there a SwiftUI equivalent for viewWillDisappear(_:) or detect when a view is about to be removed?

分類Dev

@State not updating SwiftUI view when changed in mutating function and initialiser

分類Dev

How to animate the chevron glyphicon when toggling a bootstrap 3 panel?

分類Dev

How to perform a modal transition like the center button in the Instagram app with SwiftUI TabView?

分類Dev

When animating view with UIView.animate other views are also needlessly animated

分類Dev

how to remove default animation transition when using navigation component in Android?

分類Dev

How to update XPaths when adding a node

分類Dev

How to navigate to another view in NavigationView without NavigationButton in SwiftUI?

分類Dev

How to expand a row cell smoothly with a custom view in SwiftUI List?

Related 関連記事

  1. 1

    How to consume click event in view hierarchy

  2. 2

    How to turn off AutoLayout for a view hierarchy programmatically?

  3. 3

    How do i make a slow transition for something that you cannot animate?

  4. 4

    How to smoothly transition animations between divs using jquery .animate

  5. 5

    Lifecycling in SwifUI: Running code when leaving a child view of a NavigationView hierarchy

  6. 6

    SwiftUI: How can I restrict the tappable area of a view when presenting a modal(actually not modal) view over a main view?

  7. 7

    How to use Combine on a SwiftUI View

  8. 8

    How to use Combine on a SwiftUI View

  9. 9

    How to animate dynamic List sorting with SwiftUI and CoreData (@FetchRequest)

  10. 10

    How do you get view hierarchy in Android or Android Espresso

  11. 11

    How can I make view to update when current time passes the threshold in SwiftUI?

  12. 12

    SwiftUI: Animate Circles in List

  13. 13

    How to animate a 'cloned', duplicate version of existing android View

  14. 14

    SwiftUI how to add an Underline to a Text View?

  15. 15

    SwiftUI how to add an Underline to a Text View?

  16. 16

    How to do navigation control in SwiftUI view

  17. 17

    animate path stroke drawing in SwiftUI

  18. 18

    Swift - getting back to view that is not in the hierarchy

  19. 19

    Adding animate.css on hover

  20. 20

    Is there a SwiftUI equivalent for viewWillDisappear(_:) or detect when a view is about to be removed?

  21. 21

    Is there a SwiftUI equivalent for viewWillDisappear(_:) or detect when a view is about to be removed?

  22. 22

    @State not updating SwiftUI view when changed in mutating function and initialiser

  23. 23

    How to animate the chevron glyphicon when toggling a bootstrap 3 panel?

  24. 24

    How to perform a modal transition like the center button in the Instagram app with SwiftUI TabView?

  25. 25

    When animating view with UIView.animate other views are also needlessly animated

  26. 26

    how to remove default animation transition when using navigation component in Android?

  27. 27

    How to update XPaths when adding a node

  28. 28

    How to navigate to another view in NavigationView without NavigationButton in SwiftUI?

  29. 29

    How to expand a row cell smoothly with a custom view in SwiftUI List?

ホットタグ

アーカイブ