[SwiftUI] Animation で画面を動かす方法

SwiftUI

SwiftUI では簡単に画面に動きをつけることができます。その方法を説明します。

Animation

SwiftUI になって、Animation という struct が導入されました。

Apple のドキュメントは、こちら

この Animation を使うことで、画面に動きをつけることが簡単にできるようになりました。

このような動きが数行のコードを追加することで実現できるようになりました。

画面に動きをつける

最初に、画面が変更されるような振る舞いが必要です。
例えば、ボタンを押したら、テキストの位置が変わるという振る舞いです。

以下のコードで試していきます。

animation base (without animation)

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2020/11/23
//  © 2020  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
  @State private var toggle: Bool = true
  var body: some View {
    VStack {
      Text("Hello, world!")
        .offset(y: toggle ? 0 : -100)
        .font(.largeTitle)
        .padding()
      Button(action: {
        toggle.toggle()
      }, label: {
        Text("animate text")
      })
    }
  }
}

アニメーションの指定をつけていないいので、以下のような動作になります。

ボタンを押すと、.offset の位置指定が変更されるので、表示が切り替わっています。

ここに、アニメーション指定することで、表示がアニメーション付きで切り替わるようになります。

アニメーションの指定方法は、3つあります。

  • View に対して指定する方法
  • 一連のコード実行 (clousre) に対して指定する方法
  • Binding された変数に対して指定する方法

(View).animation

ビューに .animation modifier を指定することで、アニメーションするようになります。

以下のコードで実現しています。

view modifier でアニメーション

struct ContentView: View {
  @State private var toggle: Bool = true
  var body: some View {
    VStack {
      Text("Hello, world!")
        .offset(y: toggle ? 0 : -100)
        .font(.largeTitle)
        .padding()
        // (1)
        .animation(Animation.interactiveSpring(dampingFraction: 0.2))
      Button(action: {
        toggle.toggle()
      }, label: {
        Text("animate text")
      })
    }
  }
}
コード解説
  1. View に対して、.animation modifier を使って、アニメーションを指定しています。

1行追加するだけで、アニメーションが追加できました。

注意
アニメーション対象は、View 生成から、.animation までの範囲です。

.animation 指定後に、.offset 指定しても、何もアニメーションしません。

withAnimation

View ではなく、closure で実行されるコードの影響を アニメーションさせることもできます。

withAnimation でアニメーション

struct ContentView: View {
  @State private var toggle: Bool = true
  var body: some View {
    VStack {
      Text("Hello, world!")
        .offset(y: toggle ? 0 : -100)
        .font(.largeTitle)
        .padding()
      Button(action: {
        // (1)
        withAnimation(Animation.interactiveSpring(dampingFraction: 0.2)) {
          toggle.toggle()
        }
      }, label: {
        Text("animate text")
      })
    }
  }
}
コード解説
  1. アニメーションの原因となる操作を withAnimation 指定しています

同じ Animation を指定しているので、動作は同じです。

例えば、同じ変数を参照しているすべてのビューをアニメーションさせたい時に便利です。

(Binding).animatiton

Binding 変数に直接指定することもできます。

Binding.animation でアニメーション

struct ContentView: View {
  @State private var toggle: Bool = true
  var body: some View {
    VStack {
      Text("Hello, world!")
        .offset(y: toggle ? 0 : -100)
        .font(.largeTitle)
        .padding()
      // (1)
      Toggle("button", isOn: $toggle.animation(Animation.interactiveSpring(dampingFraction: 0.2)))
          .padding()
      Button(action: {
        withAnimation(Animation.interactiveSpring(dampingFraction: 0.2)) {
          toggle.toggle()
        }
      }, label: {
        Text("animate text")
      })
    }
  }
}
コード解説
  1. Binding 変数を操作するように Toggle を入れて、.animation 指定しています

まとめ: 画面に動きをつける方法

タイトル
  • アニメーションには、Animatino を使う
  • View modifier の .animation 指定されたビューがアニメーションする
  • withAnimation 指定された clousre の影響でアニメーションする
  • .animation 指定された Binding 変数の効果がアニメーションする

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です