XCode 12.4 日本語化計画：Swift Tutorials

セクション 103

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




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




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












    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. }





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





ステップ 2

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




---




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






    HikeView.swiftt



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





ステップ 3

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








ステップ 4

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




    HikeView.swiftt



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





セクション 1	セクション 2	セクション 3
セクション 4	セクション 5
セクション 101	セクション 102	セクション 103
セクション 104	セクション 105