SmallDeskSoftware 
Sponsor Link
環境＆対象
- macOS15.0 Sequoia
- Xcode 16.1 Beta
- iOS 18.1
- Swift 5.9
.animation
SwiftUI での View に 内部の状態に応じて動きをつけるために .animation が用意されています。
参考
animation(_:)Apple Developer Documentation
参考
AnimationApple Developer Documentation
意味的には、その View が持つ状態が ある状態から別の状態に時間をかけて変化する方法を指定することができます。
以下は、Button を押下すると Image の表示幅が、10ずつ 増えていくようにしてみたものです。
import SwiftUI
struct ContentView: View {
@State private var viewWidth = 10.0
var body: some View {
VStack {
HStack {
Image(systemName: "pencil").resizable().scaledToFit().frame(width: viewWidth)
Button(action: { viewWidth += 10.0 }, label: { Text("ZoomUp") })
Button(action: { viewWidth -= 10.0 }, label: { Text("ZoomDown") })
}
}
.padding()
}
}ボタンを押すと、frame の width が切り替わり、パッと 表示が切り替わります。
この切り替わりをスムーズにするのが、.animation の役割です。
参考
animation(_:value:)Apple Developer Documentation
引数には、切り替わり具合(?)と 対象の変数を指定しています。
切り替わりの具合(?) には、.linear を指定してみます。
参考
linearApple Developer Documentation
この .linear は、0.35 秒かけて 値を線形に変化させます。
線形に変化とは、時間あたりの変化量を一定にして変化させることです。
例えば、10 -> 20 の変化を行う場合、(ちょうど半分の) 0.175 秒経過時には、(10と20の中間の) 15になっているということです。
import SwiftUI
struct ContentView: View {
@State private var viewWidth = 10.0
var body: some View {
VStack {
HStack {
Image(systemName: "pencil").resizable().scaledToFit().frame(width: viewWidth)
Button(action: { viewWidth += 10.0 }, label: { Text("ZoomUp") })
Button(action: { viewWidth -= 10.0 }, label: { Text("ZoomDown") })
}
.animation(.linear, value: viewWidth)
}
.padding()
}
}スムーズにビューの大きさが変化しているのがわかります。
値変化と変化時間
先ほどは、linear を指定しました。この指定は 変化時間中 同じ変化量で変化していきます。
つまり、開始時は いきなり動き出し、終了時には いきなり止まる ということです。
この状態を和らげるために、spring というものも用意されています。
spring に置き換えるには、以下のようなコードになり、動作も変わります。(意識して見ないと違いはわからないかもしれません・・・)
import SwiftUI
struct ContentView: View {
@State private var viewWidth = 10.0
var body: some View {
VStack {
HStack {
Image(systemName: "pencil").resizable().scaledToFit().frame(width: viewWidth)
Button(action: { viewWidth += 10.0 }, label: { Text("ZoomUp") })
Button(action: { viewWidth -= 10.0 }, label: { Text("ZoomDown") })
}
.animation(.spring, value: viewWidth)
}
.padding()
}
}
spring 以外にも変化方法を指定するものが複数用意されています。
・easeIn
・easeOut
・easeInOut
・bouncy
・smooth
・snappy
・interactiveSpring
・interpolatingSpring
詳細はそれぞれのドキュメントを確認してください。
変化方法を指定する要素は、おおきく以下の２つで構成されます。
・変化方法
・変化時間
変化方法は先にみた、linear/spring/… で指定します。
それぞれの変化方法には、デフォルトの変化時間が用意されていますが、明示的に外部から指定することもできます。
例えば、linear は、linear(duration:) を使うことで指定できます。
参考
linear(duration:)Apple Developer Documentation
なお、duration には、TimeInterval を指定します。
duration に 1(秒)を指定すると、以下のような動作になります。
import SwiftUI
struct ContentView: View {
@State private var viewWidth = 10.0
var body: some View {
VStack {
HStack {
Image(systemName: "pencil").resizable().scaledToFit().frame(width: viewWidth)
Button(action: { viewWidth += 10.0 }, label: { Text("ZoomUp") })
Button(action: { viewWidth -= 10.0 }, label: { Text("ZoomDown") })
}
.animation(.linear(duration: 1), value: viewWidth)
}
.padding()
}
}
まとめ
animation を改めてまとめてみました
- animation は、View の状態変化を アニメーションにする
- 値の変化方法を指定できる
- 値の変化方法には、linear, spring, easeIn 等がある
- 値の変化方法によっては、指定できるパラメータが他にもある
- 値の変化時間を指定できる
説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。
SwiftUI おすすめ本
SwiftUI を理解するには、以下の本がおすすめです。
SwiftUI ViewMatery
SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
英語での説明になってしまいますが、以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、便利です。
英語ではありますが、１ページに コードと画面が並んでいるので、非常にわかりやすいです。
View に適用できる modifier もわかりやすく説明されているので、ビューの理解だけではなく、どのような装飾ができるかも簡単にわかります。
超便利です
販売元のページは、こちらです。
SwiftUI 徹底入門
＃ SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。
Swift学習におすすめの本
詳解Swift
Swift の学習には、詳解 Swift という書籍が、おすすめです。
著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。
最新版を購入するのがおすすめです。
現時点では、上記の Swift 5 に対応した第５版が最新版です。
関連記事:
Sponsor Link
