2015/04/30更新

[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に関する情報を中心に発信していきます。気になった方はぜひ、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。