0

質問

animationモディファイアとwithAnimationの違いはなんですか?
理解しようと思って、下記のサンプルを書いてみたのですが、同様の動きをする場合としない場合があることはわかったのですが、どのようなときに違いが生まれるのか等、イマイチわかりませんでした。

書いてみたサンプル

animationモディファイアとwithAnimation、どちらで書いてもアニメーションする例

animationモディファイア版

import SwiftUI

struct ContentView: View {
  @State private var scale: CGFloat = 1.0

  var body: some View {
    VStack {
      Rectangle().frame(
        width: 100,
        height: 100
      )
      .scaleEffect(
        scale
      )
      .animation(
        .default
      )
      Button(
        "scale +",
        action: {
          scale += 0.5
        }
      )
    }
  }
}

withAnimation版

import SwiftUI

struct ContentView: View {
  @State private var scale: CGFloat = 1.0

  var body: some View {
    VStack {
      Rectangle().frame(
        width: 100,
        height: 100
      )
      .scaleEffect(
        scale
      )
      Button(
        "scale +",
        action: {
          withAnimation {
            scale += 0.5
          }
        }
      )
    }
  }
}

withAnimationの場合のみアニメーションする例

animationモディファイア版

import SwiftUI

struct ContentView: View {
  @State var flag = false

  var body: some View {
    ZStack {
      if flag {
        FirstView(
          flag: $flag
        )
      } else {
        SecondView(
          flag: $flag
        )
      }
    }
  }
}

struct FirstView: View {
  @Binding var flag: Bool

  var body: some View {
    ZStack {
      Color.green.ignoresSafeArea()
      Button(
        "Button",
        action: {
          flag.toggle()
        }
      )
    }
    .transition(.opacity)
    .animation(.default)
  }
}

struct SecondView: View {
  @Binding var flag: Bool

  var body: some View {
    ZStack {
      Color.yellow.ignoresSafeArea()
      Button(
        "Button",
        action: {
          flag.toggle()
        }
      )
    }
    .transition(.opacity)
    .animation(.default)
  }
}

withAnimation版

import SwiftUI

struct ContentView: View {
  @State var flag = false

  var body: some View {
    ZStack {
      if flag {
        FirstView(
          flag: $flag
        )
      } else {
        SecondView(
          flag: $flag
        )
      }
    }
  }
}

struct FirstView: View {
  @Binding var flag: Bool

  var body: some View {
    ZStack {
      Color.green.ignoresSafeArea()
      Button(
        "Button",
        action: {
          withAnimation {
            flag.toggle()
          }
        }
      )
    }
    .transition(.opacity)
  }
}

struct SecondView: View {
  @Binding var flag: Bool

  var body: some View {
    ZStack {
      Color.yellow.ignoresSafeArea()
      Button(
        "Button",
        action: {
          withAnimation {
            flag.toggle()
          }
        }
      )
    }
    .transition(.opacity)
  }
}

1 件の回答 1

1

animationモディファイアの説明は、次のようになっています。

Summary
Applies the given animation to all animatable values within this view.

to all animatable values within this view とありますから、このモディファイヤが付加されたViewに内在する全てのanimatableな値(@State@Bindingのことではありません)に対するアニメーションを指定する、と言う感じですね。

あなたの、「withAnimationの場合のみアニメーションする例」では、animationモディファイヤが付加されたFirstViewSecondViewには、(flagで変化するような)animatableなプロパティは存在しないのだろうと考えられます。

少し修正してもらうと、animationモディファイヤ版でもアニメーションするようになります。

import SwiftUI

struct ContentView: View {
  @State var flag = false

  var body: some View {
    let bodyView = ZStack {
      if flag {
        FirstView(
          flag: $flag
        )
      } else {
        SecondView(
          flag: $flag
        )
      }
    }
    .animation(.default) //<-
    return bodyView
  }
}

struct FirstView: View {
  @Binding var flag: Bool

  var body: some View {
    ZStack {
      Color.green.ignoresSafeArea()
      Button(
        "Button",
        action: {
          flag.toggle()
        }
      )
    }
    .transition(.opacity)
  }
}

struct SecondView: View {
  @Binding var flag: Bool

  var body: some View {
    ZStack {
      Color.yellow.ignoresSafeArea()
      Button(
        "Button",
        action: {
          flag.toggle()
        }
      )
    }
    .transition(.opacity)
  }
}

ViewBuilder内のif文は_ConditionalContent<FirstView, SecondView>のような謎の非公開Viewを作成する(return bodyViewの行にブレークポイントを置くとデバッガには表示されます)のですが、flagの変化に対応するanimatableな要素は、こちらに存在すると考えられる(非公開で、ドキュメントなどは無いため推定ですが)ため、それを含むViewにanimationモディファイヤを付加すればいい、と言うことになります。

2
  • 興味が出たので、他にもコードを書いて調べていました。if文を書いたにもかかわらず_ConditionalContentにならない例がありました。 developer.apple.com/documentation/swiftui/viewbuilder にも_ConditionalContentが言及されており、おかしいなと思ってよくみてみると、 static func buildIf<Content>(Content?) -> Content? というのがあり、たしかに、ifで書いたところがOptionalでラップされていました。 厳密にはif文は〜とご回答されたところは、if文のthen節とelse節は〜でしょうか?(つまりelse節がない場合は_ConditionalContent ではなく Optional)(コメントではなくて別質問のほうがよければ別質問をたてます) Commented 2021年7月30日 1:19
  • 1
    @shingo.nakanishi さん、その通りでif-elseでelse節がないと_ConditionalContentにはならないですね。そこら辺は非公開データ型であると言うこともあり、かなり緩く書いていると思って下さい。
    – OOPer
    Commented 2021年7月30日 1:35

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。