【swift】animated-tab-barを試してみる

今回は読んで字の如く、タブバーアイコンのアニメーションが簡単にできる「animated-tab-bar」を試していきたいと思います。ライセンスはMITです。

リンク先に動作イメージのアニメーションがあるので、ご参考に

Ramotion/animated-tab-bar
:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion - Ramotion/...

では、いきましょう

手順

1.まずはプロジェクトを作成して、podで該当ライブラリをインストール&xcworkspaceを起動します。(今回のサンプルプロジェクト名にハイフンが入っていますが、良い子はマネしないように!)

pod 'RAMAnimatedTabBarController'

2.storyboardでTab Bar Controllerを追加します。

  白矢印(initial view)をTab Bar Controllerに移しておくのも忘れずに

3.Tab Bar ControllerのClassとModuleにRAMAnimatedTabBarControllerを設定します。

4.各UITabBarItemのClassにRAMAnimatedTabBarItemを設定します。

  ModuleにはRAMAnimatedTabBarControllerを設定します。

5.Assets.xcassetsに画像を追加したら(30pxが丁度いいみたいです。使用したのは32px)

  各UITabBarItemに画像を設定します。

6.Objectを追加したらClassにアニメーションを設定します。(矢印が不格好ですみません。。。)

  ModuleにはRAMAnimatedTabBarControllerを設定します。

  アニメーションは下記が設定できるようです。

  • RAMBounceAnimation
  • RAMLeftRotationAnimation
  • RAMRightRotationAnimation
  • RAMFlipLeftTransitionItemAnimations
  • RAMFlipRightTransitionItemAnimations
  • RAMFlipTopTransitionItemAnimations
  • RAMFlipBottomTransitionItemAnimations
  • RAMFrameItemAnimation
  • RAMFumeAnimation

7.TabBarItemとObjectを接続します。

  TabBarItemからcontrolキーを押しながら、ObjectにドラッグアンドドロップするとOutletsが表示されると思いますので、animationを選択して接続します。

以上で、設定完了です。

シミュレータか実機で確認してみてください。

結構簡単に実装できるので、ワンポイントとして使ってみてもいいかもですね!

コメント