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

スポンサーリンク
SwiftUI
スポンサーリンク
スポンサーリンク

アニメーション

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モディファイアは、ビューのエフェクトや変化にアニメーションをつけることが出来ます。

まとめ

SwiftUIでは、animationモディファイアを使うことで、アニメーションをつけることが出来ます。

animationモディファイアは、単体では何も起こらず、エフェクトや変化に対して対して付ける事で使えます。


世界最大級のオンライン学習サイトUdemy

おすすめの記事


現役エンジニアから学ぶならテックアカデミー

コメント

タイトルとURLをコピーしました