XCode 12.4 日本語化計画：Swift Tutorials

セクション 5

複雑な効果のためのアニメーションを作成




バーの下のボタンをクリックすると、グラフが 3 つの異なるデータセットを切り替えます。このセクションでは、作成したアニメーションを使用して、グラフをダイナミックでリップリングの移行にするカプセルを提供します。





ステップ 1

HikeView では、ShowDetail のデフォルト値を true に変更し、プレビューをキャンバスに固定します。




---




これにより、別のファイル内のアニメーションで作業中にグラフがコンテキスト内のグラフを見ることができます。





























ステップ 2

HikeGraph.Swift で、新しい ripple アニメーションを定義し、それをそれぞれ生成されたグラフカプセルにスライド移行とともに適用します。






















































ステップ 3

アニメーションをバネのアニメーションに切り替え、減衰率を下げてバーをホップさせます。




---




ライブプレビューで上昇率、心拍数、ペースを切り替えることで、アニメーションの効果を確認できます。







ステップ 4

アニメーションを少しスピードアップして、各々のバーが新しい位置に移動するのにかかる時間を短くします。












ステップ 5

グラフ上のカプセルの位置に基づいて、各アニメーションを遅らせます。
























ステップ 6

グラフ間を移行するときに、カスタムアニメーションが波打つ効果をどのように提供するかを観察して下さい。




---




次のチュートリアルに進む前に、必ずプレビューの固定を解除してください。

プレビュー その 1

    HikeGraph.swift

1. import SwiftUI
extension Animation {
static func ripple() -> Animation {
Animation.default
}
}
4. struct HikeGraph: View {
5. var hike: Hike
6. var path: KeyPath<Hike.Observation, Range<Double>>
8. var color: Color {
9. switch path {
10. case \.elevation:
11. return .gray
12. case \.heartRate:
13. return Color(hue: 0, saturation: 0.5, brightness: 0.7)
14. case \.pace:
15. return Color(hue: 0.7, saturation: 0.4, brightness: 0.7)
16. default:
17. return .black
18. }
19. }
21. var body: some View {
22. let data = hike.observations
23. let overallRange = rangeOfRanges(data.lazy.map { $0[keyPath: path] })
24. let maxMagnitude = data.map { magnitude(of: $0[keyPath: path]) }.max()!
25. let heightRatio = 1 - CGFloat(maxMagnitude / magnitude(of: overallRange))
27. return GeometryReader { proxy in
28. HStack(alignment: .bottom, spacing: proxy.size.width / 120) {
29. ForEach(Array(data.enumerated()), id: \.offset) { index, observation in
30. GraphCapsule(
31. index: index,
32. height: proxy.size.height,
33. range: observation[keyPath: path],
34. overallRange: overallRange)
35. .colorMultiply(color)
.transition(.slide)
.animation(.ripple())
36. }
37. .offset(x: 0, y: proxy.size.height * heightRatio)
38. }
39. }
40. }
41. }

上記の 5 行目を以下のように書き換えます。

    HikeGraph.swift

3. extension Animation {
4. static func ripple() -> Animation {
Animation.spring(dampingFraction: 0.5)
5. }
6. }

上記の 5 行目の後に以下のように書き加えます。

    HikeGraph.swift

4. static func ripple() -> Animation {
5. Animation.spring(dampingFraction: 0.5)
.speed(2)
6. }
7. }

上記の 4 行目以降、及び 43 行目を 以下のように書き足します。

    HikeGraph.swift

3. extension Animation {
static func ripple(index: Int) -> Animation {
4. Animation.spring(dampingFraction: 0.5)
5. .speed(2)
.delay(0.03 * Double(index))
6. }
7. }

42. .colorMultiply(color)
43. .transition(.slide)
.animation(.ripple(index: index))
44. }
45. .offset(x: 0, y: proxy.size.height * heightRatio)

(注：上記 7 行目を書き足しているため行番号が 1 つずれています。)

次




複雑なインターフェースの構成




ランドマーク (Landmarks) のカテゴリビューには、水平方向にスクロールするランドマークの垂直方向にスクロールするリストが表示されます。このビューをビルドして既存のビューに接続すると、構成されたビューがさまざまなデバイスのサイズと向きにどのように適応できるかを探ります。




さあ始めましょう