iOSでビューの背景色の変化をアニメーション化する方法

この記事では、UIView.animateメソッドを使って、ビューの背景色の変化を滑らかなアニメーションとして表示する方法を解説します。

具体的な例として、ボタンをタップするたびに背景色が切り替わる仕組みを作成します。1回目のタップで背景色が赤に変化し、2回目で青、3回目で再び赤へと、タップのたびに赤と青が交互にアニメーションで切り替わります。

手順1：プロジェクトの作成

Xcodeを起動し、「File」→「New」→「Project」からSingle View Applicationを選択して新規プロジェクトを作成します。プロジェクト名は「ChangeBGColor」としましょう。

手順2：ボタンの配置

Main.storyboardを開き、画面上にUIButtonを配置します。ボタンのタイトルは「Change Background Color」など分かりやすいものに設定しておくと良いでしょう。

手順3：IBActionの作成

配置した「Change Background」ボタンのtouchUpInsideイベントに対して@IBActionを接続します。関数名はchangeBackgroundClickedとします。

手順4：アニメーション処理の実装

背景色のアニメーションには、UIKitが提供するUIView.animate(withDuration:)メソッドを使用します。このメソッドには必須パラメータとしてアニメーションの継続時間（duration）を指定でき、必要に応じて完了時のコールバック（completion）も設定できます。

changeBackgroundClicked内では、現在の背景色が赤であれば青へ、そうでなければ赤へと、クロージャ内で新しい背景色を設定するだけでアニメーションが自動的に適用されます。

@IBAction func changeBackgroundClicked(_ sender: Any) {
    if self.view.backgroundColor == UIColor.red {
        UIView.animate(withDuration: 2) {
            self.view.backgroundColor = UIColor.blue
        }
    } else {
        UIView.animate(withDuration: 2) {
            self.view.backgroundColor = UIColor.red
        }
    }
}

手順5：実行して確認

コードを実行し、「Change Background Color」ボタンをタップしてみましょう。ビューの背景色が赤と青の間で、2秒かけてなめらかにアニメーションしながら切り替わるのが確認できます。

ポイント解説

durationに指定する数値を変更すれば、アニメーションの速度を自由に調整できます。例えば0.5にすれば素早い切り替えに、5にすればよりゆっくりとした変化になります。また、UIColor.systemBackgroundなどシステムカラーとの組み合わせや、ダークモード対応も考慮すると、より実用的な実装になります。