iOSアプリ開発でビューをフェードインで表示させる
iOSアプリ開発でビューをフェードイン表示させます。もちろんフェードアウトもできますよ。
フェードイン表示はアニメーション表示の一種なので、UIView クラスの animateWithDuration メソッドを使用します。
開発環境
完成予定図
ボタンをタップすると、青い背景のビューがフェードインで表示されます。
ビューをフェードイン表示させる
Xcode の Single View Application テンプレートで作成します。
ボタンとビューを配置・設定
ボタンとビューを Main.storyboard に最初からある ViewController のビューに配置します。追加するビューの Alpha を 0 にします。
ビューの背景色を変更し、ボタンのタイトルを Show に変更しました。ビューは透明なので、どこにあるのか分かりません。
画像では、ビューを選択しているのでどこにあるのか分かりますね。青い線が表示されているのは Constraint を設定しているからです。
追加したビューを設定
追加したビューを、Outlet 名を blueView として ViewController.swift にリンクさせます。
ボタンにアクションを設定
ボタンを、アクション名を showBlueView として ViewController.swift にリンクさせます。showBlueView メソッドに以下のコードを書きます。
UIView.animateWithDuration(2.0) { () -> Void in
self.blueView.alpha = 1.0
}
}}
これで完成です。
animateWithDuration メソッドの animation 引数のクロージャに、アニメーション終了時のビューのプロパティを書きます。今回は、blueView を不透明にしたいので、 self.blueView.alpha = 1.0 にしました。
まとめ
ビューのプロパティをアニメーションさせながら変えたい時は、UIView クラスの animateWithDuration メソッドを使う。楽にアニメーション表現ができます。