SwiftUI Tutorials - Animating Views and Transitions

Apple Developer Documentation

Add Hiking Data to the App

サイトで配布されているデータをダウンロードしてXcodeのResources folderに入れて 使います。

hikeData.json
Hikes folder

そしてモデルを作っていきます。

Hike.swiftというSwiftファイルを作り、構造体Hikeを作ります。データ構造を記述していきます。Codableなどに対応します。

struct Hike: Codable, Hashable, Identifiable {
   var id: Int
   var name: String
   var distance: Double
   var difficulty: Int
   var observations: [Observation]
   static var formatter = LengthFormatter()
   var distanceText: String {
       return Hike.formatter
           .string(fromValue: distance, unit: .kilometer)
   }
   
 　　struct Observation: Codable, Hashable {
    　　var distanceFromStart: Double
    　　var elevation: Range<Double>
   　　 var pace: Range<Double>
   　　 var heartRate: Range<Double>
  　 }
  }

次に、ModelData.swiftに以下追加します。

 var hikes: [Hike] = load("hikeData.json")

そして、表示させてみます。 ダウンロードしたフォルダに入っているHikeView.swiftを実行すると

となります。

Add Animations to Individual Views

ここではButtonのカスタマイズをします。

Button(action: {
                   self.showDetail.toggle()
               }) {
                   Image(systemName: "chevron.right.circle")
                       .imageScale(.large)
                       .rotationEffect(.degrees(showDetail ? 90 : 0))
                       .scaleEffect(showDetail ? 1.5 : 1)
                       .padding()
               }

以下アニメションを試して、

.animation(.easeInOut)
.animation(.spring())

最終的にはアニメーションを外して以下追加します。

.scaleEffect(showDetail ? 1.5 : 1)

Animate the Effects of State Changes

　アニメーションする時にエフェクトを付けていきます。

変数showDetailを使ってエフェクトのオンオフしています。

例えば、"withAnimation"でアニメーションを付けます(4秒かけて表示されます)。

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

例えばの一例でした。

Customize View Transitions

トランディションのカスタマイズです。

条件付きの画面遷移です。

 if showDetail {
               HikeDetail(hike: hike)
                   .transition(.slide)
           }

これでグラフのオンオフできます。

"AnyTransition"を使います。

Apple Developer Documentation

extension AnyTransition {
   static var moveAndFade: AnyTransition {
       AnyTransition.slide
   }
}

"extension"拡張します。スムーズにトランジションするようにします。

AnyTransition.slide

を

AnyTransition.move(edge: .trailing)

に変更してスライドの出し入れができるようにします。

次にさらにカスタマイズします。

let insertion = AnyTransition.move(edge: .trailing)
           .combined(with: .opacity)
       let removal = AnyTransition.scale
           .combined(with: .opacity)
       return .asymmetric(insertion: insertion, removal: removal)

Compose Animations for Complex Effects

いろんなアニメーションを合成します。

Xcodeを起動してHikeViewをCanvasでプレビュー画面してPinで固定します。

このまま HikeGraph.swiftの中で"ripple animation "を定義して、パラメーターを追加していきます。

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