【Swift/UIKit】UIView.animateメソッドの使い方!アニメーションの実装

この記事からわかること
- Swift/UIKitでUIViewをアニメーションさせる方法
- animateメソッドの使い方と違い
- 位置やサイズの変化をさせる
- AnimationOptions型の使い方
index
[open]
\ アプリをリリースしました /
環境
- Xcode:15.0.1
- iOS:17.0
- Swift:5.9
- macOS:Sonoma 14.1
UIKitを使用したiOSアプリ開発でビューにアニメーションを実装する方法をまとめて行きます。
アニメーションを実装する方法
アニメーションを実装する方法はいくつか用意されています。それぞれの役割とは以下の通りになります。
- UIView.animate:サイズや色合いなど簡素なアニメーション
- UIView.transition:遷移アニメーション
- UIView.animateKeyframes:連続したアニメーション
- CABasicAnimation:複雑なアニメーション
UIView.animateメソッドの使い方
UIKitのビューのサイズや位置などを変化させた際にアニメーションを実装するにはUIView.animate
メソッドを使用します。引数duration
にはTimeInterval
型(Doubleのエイリアス)でアニメーションの変化にかかる時間を指定します。引数animations
内でViewのプロパティを変化させることで対象のViewが滑らかに変化するようになります。
class func animate(
withDuration duration: TimeInterval,
animations: @escaping () -> Void
)
例えばViewの位置をずらす場合は以下のように実装します。
let square = UIView(frame: CGRect(x: 0, y:0, width: 150 , height: 150))
square.backgroundColor = .orange
square.center = self.view.center
UIView.animate(withDuration: 1.0) {
square.center.y -= 100.0
}
self.view.addSubview(square)

アニメーションが適応されるプロパティの種類
アニメーションが適応されるのはUIViewのプロパティの中では以下の6種類のようです。
- frame:位置とサイズ
- bounds:位置とサイズ
- center:中心座標
- transform:回転やスケーリングなど
- alpha:透明度
- backgroundColor:背景色
これらのプロパティをanimations
内で変化させることでアニメーションが実行されます。
let square = UIView(frame: CGRect(x: 0, y:0, width: 150 , height: 150))
square.backgroundColor = .orange
square.center = self.view.center
UIView.animate(withDuration: 1.0) {
// サイズ変更
square.frame.size = CGSize(width: 200, height: 200)
// 位置変更
square.center.y -= 100.0
// 回転
let angle: CGFloat = 45 * .pi / 180
square.transform = CGAffineTransform(rotationAngle: angle)
// 透明度変更
square.layer.opacity = 0.3
// 背景色
square.backgroundColor = .green
}
self.view.addSubview(square)

CALayerのプロパティも変化する
CALayer
クラスのプロパティでもアニメーションを実装することができました。
UIView.animate(withDuration: 2.0) {
square.layer.cornerRadius = 30
square.layer.opacity = 0
}

引数違いのanimateメソッド
animate(withDuration:delay:options:animations:completion:)
・delay
:アニメーション開始前の待機時間
・options
:AnimationOptions型でアニメーションオプション設定
UIView.animate(withDuration: 1.0, delay: 3.0, options: .repeat) {
square.center.y -= 100.0
}
例えばoptions
に.repeat
を渡すことでアニメーションを繰り返し実行することができます。

AnimationOptions型の種類
- repeat : アニメーションを繰り返す
- autoreverse : アニメーションを再生後、逆再生(repeatと併用)
- curveEaseInOut : 緩やか → 速い → 緩やか
- curveEaseIn : 緩やか → 速い
- curveEaseOut : 速い → 緩やか
- curveLinear : 一定速度
- beginFromCurrentState : アニメーション中に現在の状態からアニメーション開始
- allowUserInteraction : アニメーション中にユーザー操作を許可
- allowAnimatedContent : アニメーション中にビューの再描画を許可
- preferredFramesPerSecond30 : 1秒あたり30フレームレート
- preferredFramesPerSecond60 : 1秒あたり60フレームレート
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。