[iOS][Swift3.0] タブにちょっとしたアニメーションを入れるanimated-tab-bar

iOSで画面の下部にタブがあるアプリケーションはよく見かけると思います。
今回はそんな下部タブのボタンにちょっとしたアニメーションを入れるanimated-tab-barを試してみました。 ライセンスはMITです。

https://github.com/Ramotion/animated-tab-bar

検証環境

今回は下記環境で試しています。

Xcode	8.2
Swift	3.0.2
CocoaPods	1.0.0

準備

導入

CocoaPodsで追加します。

use_frameworks!
target "ターゲット名"
pod 'RAMAnimatedTabBarController'

post_install do |installer|
    installer.pods_project.targets.each do |target|
target.build_configurations.each do |configuration|
    configuration.build_settings['SWIFT_VERSION'] = "3.0"
end
    end
end

また、storyboard上にTabBarControllerを配置します。

配置すると自動的に２画面分が一緒に追加されます。 サンプルでは３画面での切替をするのでもう１画面を追加しています。

そしてTabBarControllerと接続します。

また、タブバー用のアイコン画像も用意します。 ちなみに下記画像は、こちらのサイトからお借りしました。

それぞれのページにアイコン画像を設定します。

一度、実行してみて通常のタブの動きになっていれば準備は完了です。 (わかりやすように背景の色を設定しました）

animated-tab-barを使う場合、BarItemにimageをセットしないとエラーが出るようです。 必ずセットするようにしましょう。

実装

UITabBarControllerのクラスを設定する

UITabBarControllerのClassにRAMAnimatedTabBarControllerを設定します。

UITabBarItemのクラスを設定する

それぞれのページのUITabBarItemのClassにRAMAnimatedTabBarItemを設定します。

アニメーション用にオブジェクトを追加

それぞれのページに対してObjectを追加します。

追加したオブジェクトにアニメーションを設定

追加したオブジェクトのClassにアニメーション用のクラスを設定します。

アニメーションの種類

定義できるアニメーションは現時点で以下になります。

RAMBounceAnimation
RAMLeftRotationAnimation
RAMRightRotationAnimation
RAMFlipLeftTransitionItemAnimations
RAMFlipRightTransitionItemAnimations
RAMFlipTopTransitionItemAnimations
RAMFlipBottomTransitionItemAnimations
RAMFrameItemAnimation
RAMFumeAnimation

RAMFrameItemAnimationは追加で必要な手順があります。最後に追記するのでFrame指定の場合はご確認ください。

UITabBarItemとアニメーションオブジェクトを接続する

UITabBarItemを選択し、Outletsのanimationとアニメーションオブジェクトを接続します。

必要に応じて各種プロパティを設定する

そのままだとデフォルトカラーになっていると思われるので、必要に応じて各種プロパティを設定します。

未選択時のアイコンとテキストの色

未選択の色はTabBarItemのカスタムプロパテイで設定します。

選択時のアイコンとテキスト色

選択の色はアニメーションオブジェクトのカスタムプロパティで設定します。

実行イメージ

シミュレーターで実行してみました。

追記）アニメーションの種類がRAMFrameItemAnimationの場合

アニメーションの種類をRAMFrameItemAnimationにした場合、下記のファイルを用意する必要があります。plistファイルはResourceに配置します。

• フレームアニメーションに必要な画像（複数枚）
• アニメーションを定義したplistファイル

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
	<string>画像名１</string>
	<string>画像名２</string>
	<string>画像名３</string>
	・
	・
	・
</array>
</plist>

フレームアニメーション用にplistファイルを設定

フレームアニメーション用にアニメーションオブジェクトのプロパティにplistのファイル名を設定します。

さいごに

このタブバーのアニメーションですが、ユーザー操作の邪魔にならないので、 デザインに合うのであれば入れてみても良いかもしれません。
思っていた以上に手軽に入れることができました。