[SwiftUI]「アニメーション(animation)」を使う方法

アニメーション
1. animationモディファイア
使用例
まとめ
おすすめの記事
1. 関連

アニメーション

SwiftUIでは、animationモディファイアを使うことで、ビューのエフェクトや変換などにアニメーションをつけることが出来ます。

ポイントは、animationモディファイアは、アニメーションの種類を指定するだけで、単体ではアニメーションを出来ないところです。

ビューのエフェクトや変化に対して、使いましょう。

animationモディファイア

コード, プログラミング, ハッキング, Html, Web, データ, デザイン, 開発, プログラム

func animation(_ animation : Animation?) -> some View

アニメーションの種類をAnimation構造体で指定します。

主な、Animation構造体のタイププロパティやメソッドは、次のようなものです。

.default：デフォルトアニメーション（何もしない）
.linear ( duration : )：一定の割合で加速するアニメーション
easeIn：開始は遅く、だんだん速くなるアニメーション
easeOut：開始は早く、だんだん遅くなるアニメーション
easeInOut：開始は遅く、だんだん速くなり、また遅くなるアニメーション

使用例

@State var show = false
    
    var body: some View {
        VStack {
            Button(action: {
                show.toggle()
            }, label: {
                Text("表示")
            })
            .padding()
            
            if show {
                Text("アニメーション")
                    .transition(.slide)
                    .animation(.linear(duration: 7))
            }
        }
    }

Buttonをタップすることで、テキストが横から表示されるトランジションをつけています。

このトランジションに、.linearアニメーションを指定することでゆっくりスライドされるようになります。

このように、animationモディファイアは、ビューのエフェクトや変化にアニメーションをつけることが出来ます。