XCode 12.4 日本語化計画：Swift Tutorials

セクション 102

個々のビューにアニメーションを追加




ビューで animation(_:) 修飾子を使用すると、SwiftUI はビューのアニメーション化可能なプロパティへの全ての変更をアニメーション化します。ビューの色、透明度、回転、サイズ、およびその他のプロパティはすべてアニメーション可能です。












ステップ 1

HikeView.swift で、animation(.easeInOut) を追加して、ボタンの回転のアニメーションをオンにします。






プレビュー その 1





    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: {
22. self.showDetail.toggle()
23. }) {
24. Image(systemName: "chevron.right.circle")
25. .imageScale(.large)
26. .rotationEffect(.degrees(showDetail ? 90 : 0))
27. .padding()
.animation(.easeInOut)
28. }
29. }
31. if showDetail {
32. HikeDetail(hike: hike)
33. }
34. }
35. }
36. }





ステップ 2

グラフが表示されているときにボタンを大きくして、アニメーション化可能な別の変更を追加します。




---




Animation(_:) 修飾子は、包み込むビュー内のすべてのアニメーション化可能な変更に適用されます。





    HikeView.swiftt



25. .imageScale(.large)
26. .rotationEffect(.degrees(showDetail ? 90 : 0))
.scaleEffect(showDetail ? 1.5 : 1)
27. .padding()
28. .animation(.easeInOut)





ステップ 3

アニメーションタイプを easeInOut から spring() に変更します。




---




SwiftUI には、事前定義されたまたはカスタム化が容易な基本的なアニメーションと、バネおよび流動的なアニメーションが含まれています。アニメーションの速度を調整したり、アニメーションが開始するまでの時間を設定したり、アニメーションを繰り返すように指定したりできます。







    HikeView.swiftt



27. .scaleEffect(showDetail ? 1.5 : 1)
28. .padding()
.animation(.spring())
29. }
30. }





ステップ 4

scaleEffect 修飾子のすぐ上に別のアニメーション修飾子を追加して、回転のアニメーションをオフにしてみてください。




---




実験

SwiftUI を試してみてください。さまざまなアニメーション効果を組み合わせて、何が可能かを確認してください。





    HikeView.swiftt



25. .imageScale(.large)
26. .rotationEffect(.degrees(showDetail ? 90 : 0))
.animation(nil)
27. .scaleEffect(showDetail ? 1.5 : 1)
28. .padding()





ステップ 5

次のセクションに進む前に、両方の animation(_:) 修飾子を削除してください。






    HikeView.swiftt



25. .imageScale(.large)
26. .rotationEffect(.degrees(showDetail ? 90 : 0))
27. .scaleEffect(showDetail ? 1.5 : 1)
28. .padding()
29. }
30. }





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