SwiftUI/Animation の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• SwiftUI/Animation へ行く。
• SwiftUI/Animation の差分を削除

#author("2023-09-09T21:46:41+09:00","default:shota","shota")
#author("2023-09-09T23:33:11+09:00","default:shota","shota")
[[FrontPage]]

*概要 [#mc26470b]
-iOS15で変更があった
-表示非表示の切替はトランジション．形状の変化はアニメーションを参照
-簡単にアニメーションが実現できる反面，微調整は難しそう

*目次 [#q368ddc5]
#contents

*トランジション [#j9831df9]
-Viewの表示/非表示の際のアニメーション

**例 [#dd3a0c41]
#highlightjs(swift)
 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()
    }
 }

**説明 [#o6d7403c]
-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を利用する必要がある

**Combined [#p0faf42d]
-Transitionは複数個を重ねて適用することもできる
-重ねるにはAnyTransition構造体（Transitionの指定）のcombinedメソッドを呼び出す
#highlightjs(swift)
 Image(systemName: ...)
     .transition(AnyTransition.opacity.combined(with: .scale))

**Asymmetric [#r81d2fcf]
-asymmetricメソッドを使用するとViewの表示と非表示で異なる効果を用いることができる
#highlightjs(swift)
 asymmetric(insertion: AnyTransition, // 表示時の効果
                      removal: AnyTransition) // 非表示時の効果

*アニメーション [#x186ef28]
-形状や座標の変化にアニメーション効果を適用する

**例 [#h547ad85]
#highlightjs(swift)
 struct ContentView: View {
    @State var scale = 0.5
    
    var body: some View {
        VStack {
            Spacer()
            
            Circle()
                .frame(width: 300, height: 300)
                .scaleEffect(scale)
                .animation(.default, value: scale)
            
            Spacer()
            
            Slider(value: $scale)
        }
        .padding()
    }
 }

**説明 [#k226b055]
-animationモディファイアを用いて，引数に渡した値に変化があった際にアニメーションを適用する
-第一引数のAnimation?には以下のようなアニメーションを指定することができる
--default: デフォルトアニメーション
--easeIn: 遅→速
--easeOut: 速→遅
--easeInOut: 遅→速→遅
--linear: 等速
--easeIn/Out/InOut/・linear(duration: Double): アニメーションの時間
--spring・interactiveSpring・interpolatingSpring: バネの動き
--delay: 開始を遅らせる
--repeat: 指定回数繰り返し．第二引数のBoolで初期状態に戻る際にもアニメーションをするか指定することができる
--repeatForever: 永久的に繰り返す
--speed: アニメーションの速さの倍率を指定（デフォルト 1）