Closed2021/07/18にクローズ3

[SwiftUI] NavigationView に入れた要素にアニメーションを加えると、意図しない要素の移動が起こる

要素のopacity を変化させるアニメーションを実装しようとしたところ、opacity の変化だけでなく意図しないレイアウトの変化まで起こってしまう。
具体的には、opacity アニメーションを加えた要素が画面の左上から所定の位置へ移動するようなアニメーションが起こる。

Yusuke Ariyoshi

NavigationView の中に要素がある時にレイアウトのアニメーションまで起こってしまうのを防ぐためには、 DispatchQueue.main.async を使う。

@State private var contentOpacity = Double(0)

    var body: some View {
        NavigationView {
            ZStack {
                NavigationLink(destination: NextView(), isActive: $isActiveNextView) { EmptyView() }
                Group {
                    yourView1
                    yourView2
                }
              .opacity(contentOpacity)

.onAppear() {
+    DispatchQueue.main.async {
       withAnimation(.easeInOut(duration: 0.5).delay(1.0)) {
            contentOpacity = 1
        }
+    }
}

Yusuke Ariyoshi

参考

SwiftUI: Broken explicit animations in NavigationView? - Stack Overflow

このスクラップは2021/07/18にクローズされました