• 2024/1/15
• 4分

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

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• 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が滑らかに変化するようになります。

公式リファレンス：UIView.animateメソッド

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)

アニメーションが適応されるプロパティの種類

公式リファレンス：Animate views

アニメーションが適応されるのは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フレームレート

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。