[Swift] UIViewをアニメーションさせる方法

こんにちは、@yoheiMuneです。
現在、Music Pocketのver.2を開発しています。例えばViewを消すようなUI変更の場合にも、ちょっとしたアニメーションを付与することで、とても理解しやすい動きになります。そのちょっとしたアニメーションを実装する機会がSwiftでありましたので、実装方法をブログに残したいと思います。

Special Thanks to https://flic.kr/p/s6Jckc

UIVewをアニメーションさせる

UIViewをアニメーションさせるのは簡単で、数行コードを書くだけで実現することができます。今回は以下のViewをアニメーションさせることにします。

// アニメーション対象
let aView = UIView(frame: CGRectMake(0, 0, 100, 100))

そして、アニメーションについて今回はUIView.animateWithDurationを利用します。幾つかのオーバーロードが存在しますので利用用途に合わせて見ていきたいと思います。

もっとも簡単なUIViewアニメーション

以下はもっとも簡単なUIViewアニメーションの実装例です。

UIView.animateWithDuration(5, animations: { () -> Void in
    aView.backgroundColor = UIColor.greenColor()
})

ここでは5秒かけてaViewの背景色を緑色に変更しています。

アニメーション完了後に処理を行う

もしアニメーション終了時に何か処理を行いたい場合には、以下のように実装します。

UIView.animateWithDuration(5, animations: {
    aView.alpha = 0
}, completion: { finished in
    aView.removeFromSuperview()
})

上記のコードの場合、5秒間でaViewを透明にして、アニメーションが終わった時点でaViewを削除します。

開始を遅延させてアニメーションを行う

アニメーションの開始を遅延することもできます。以下のように実装します。

UIView.animateWithDuration(5, delay: 1, options: 0, animations: { () -> Void in
    // アニメーションの処理
}, completion: { _ in
    // 完了時の処理
})

上記の場合、delay引数に1を指定することでアニメーション開始を1秒遅延させています。

アニメーションカーブを指定する

また、アニメーションの変化具合を指定することが可能です。

UIView.animateWithDuration(5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
    // アニメーションの処理
}, completion: { _ in
    // 完了時の処理
})

options引数にはアニメーションカーブ以外にも様々な値を指定可能ですが、今回の場合はCurveEaseInOutを指定することでアニメーションカーブを指定しています。指定可能なアニメーションカーブは以下の参考資料をご覧ください。

参考資料

今回は、以下のiOS Developer Libraryを参照しました。ありがとうございます。

UIView Class Reference（Safari推奨）

最後に

Swift構文は数ヶ月コードを書いていますがなかなか慣れませんね。。XCODEのコード補完がイマイチで、補完をしたら構文が壊れることもちらほら・・・。執筆時点では上記のcompletionをコード補完すると構文が壊れました（泣）。改善されるといいなぁと思う今日この頃です。

Swiftの実装はコードを残していかないと忘れてしまいそうなので、今後もいっぱいSwiftについてのブログを書こうと思います。

本ブログでは、フロントエンドやiOSに関する情報を中心に発信していきます。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！