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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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を置く

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

ViewControllerを追加

そしてTabBarControllerと接続します。

TabBar接続

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

Assets_xcassets

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

アイコン設定

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

普通のタブの動き

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

実装

UITabBarControllerのクラスを設定する

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

TabBarControllerのClassを設定

UITabBarItemのクラスを設定する

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

UITabBarItemのクラスを設定する

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

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

Objectを追加します

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

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

アニメーションを設定

アニメーションの種類

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

RAMBounceAnimation Bounce
RAMLeftRotationAnimation LRot
RAMRightRotationAnimation RRot
RAMFlipLeftTransitionItemAnimations FlipL
RAMFlipRightTransitionItemAnimations FlipR
RAMFlipTopTransitionItemAnimations FlipT
RAMFlipBottomTransitionItemAnimations FlipB
RAMFrameItemAnimation Frame
RAMFumeAnimation Fume

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

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

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

Outletをつなげる

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

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

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

未選択の色は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>画像名1</string>
	<string>画像名2</string>
	<string>画像名3</string>
	・
	・
	・
</array>
</plist>

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

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

フレームアニメーション用設定

さいごに

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