SwiftUI/Animation の履歴(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• SwiftUI/Animation へ行く。
  • 1 (2023-09-09 (土) 21:46:41)

---

FrontPage

概要†

• iOS15で変更があった
• 簡単にアニメーションが実現できる反面，微調整は難しそう

目次†

トランジション†

• Viewの表示/非表示の際のアニメーション

例†

struct ContentView: View {
   @State var isHidden = false
   
   var body: some View {
       VStack {
           Button("toggle") {
               withAnimation {
                   isHidden.toggle()
               }
           }
           .padding(.bottom)
           
           if !isHidden {
               Image(systemName: "globe")
                   .imageScale(.large)
                   .foregroundColor(.accentColor)
                   .transition(.opacity)
           }
           
       }
       .padding()
   }
}

説明†

• transitionモディファイアをつけることで当該Viewの表示/非表示でアニメーション処理が行われるようになる
• モディファイアの引数に指定できるものと効果は以下の通り
  • slide: スライドインとスライドアウト．インは左からアウトは右へ
  • opacity: 透過アニメーション
  • scale: 拡大と縮小
  • scale(scale: CGFloat, anchor: UnitPoint = .center): scaleで拡大率．anchorで拡大する際の位置を指定できる
  • move(edge: Edge): 指定された方向からスライドインとアウト
  • offset(CGSize): 指定された位置へ移動しながら表示/非表示．位置は相対指定
  • offset(x: CGFloat = 0, y: CGFloat = 0): 上記の絶対指定版
  • identity: トランジション効果をつけない
• アニメーションの切替を行うStateの変更時にはwithAnimationを利用する必要がある