XCode 12.4 日本語化計画：Swift Tutorials

セクション 3

状態変化の影響をアニメーション化する




個々のビューにアニメーションを適用する方法を学習したので、状態の値を変更する場所にアニメーションを追加しましょう。




ここでは、ユーザがボタンをタップして showDetail 状態プロパティを切り替えたときに発生するすべての変更にアニメーションを適用します。














ステップ 1

withAnimation 関数への呼び出しで showDetail.toggle() への呼び出しを包み込みます。




---




showDetail プロパティの影響を受ける両方のビュー (開示ボタンと HikeDetail ビュー) にアニメーション化された移行が追加されました。
























アニメーションの速度を落として、SwiftUI アニメーションが中断可能かを確認します。





ステップ 2

4 秒の長さの basic のアニメーションを withAnimation 関数に渡します。




---




animation(_:) 修飾子に渡したのと同じ種類のアニメーションを withAnimation 関数に渡すことができます。






ステップ 3

アニメーションの途中でグラフビューを開いたり閉じたりしてみてください。





































ステップ 4

次のセクションに進む前に、withAnimation 関数を戻して、呼び出しの入力パラメータを削除して、デフォルトのアニメーションを使用するようにします。

    HikeView.swiftt

1. import SwiftUI
3. struct HikeView: View {
4. var hike: Hike
5. @State private var showDetail = false
7. var body: some View {
8. VStack {
9. HStack {
10. HikeGraph(data: hike, path: \.elevation)
11. .frame(width: 50, height: 30)
13. VStack(alignment: .leading) {
14. Text(hike.name)
15. .font(.headline)
16. Text(hike.distanceText)
17. }
19. Spacer()
21. Button(action: {
withAnimation {
22. self.showDetail.toggle()
23. }
24. }) {
25. Image(systemName: "chevron.right.circle")
26. .imageScale(.large)
27. .rotationEffect(.degrees(showDetail ? 90 : 0))
28. .scaleEffect(showDetail ? 1.5 : 1)
29. .padding()
30. }
31. }
33. if showDetail {
34. HikeDetail(hike: hike)
35. }
36. }
37. }
38. }

上記の 22 行目を以下のように書き足します。

    HikeView.swiftt

21. Button(action: {
withAnimation(.easeInOut(duration: 4)) {
22. self.showDetail.toggle()
23. }

22 行目を以下のように書き戻します。

    HikeView.swiftt

21. Button(action: {
withAnimation {
22. self.showDetail.toggle()
23. }