[iOS][Swift] IBAnimatableでコードを書かずに無駄の少ないプロトタイピング

今回はアプリデザインのプロセスをスピードアップ、廃棄物(無駄)を最小限にするというコンセプトで作られたIBAnimatableの紹介です。

アニメーションまで含めたプロトタイプを作るツールとしてFramerなどありますが、別途JSを書いたり、作った後に開発者の方で再度画面を作らなくてはならない二度手間が発生します。
IBAnimatableはAutoLayoutさえ出来ればコードを書かずにiOS端末上で動くものが作れます。 また、作ったものは実際のプロジェクトにも流用できるので無駄を最小限に出来る利点があります。

https://github.com/JakeLin/IBAnimatable

ライセンスはMITです。

どんなのが作れるの？

以下は公式で公開されていた動画です。

こんな感じのものがソースコードを書かずに作れます。?
雰囲気をつかむために、実際に試してみましょう。

試した環境

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

ターゲットはiOS9.0、デバイスはiPhone、画面回転無しでProjectを作成しました。

準備

CocoaPodsで追加します。

use_frameworks!

target "ターゲット名" do
  pod 'IBAnimatable'
end

実装

今回はTips形式？のサンプルです。

背景が画像なページを作りたい

1.背景に使う画像を用意する

Assets.xcassetsに背景で使う画像を入れます。今回はキリン画像です。

２.Storyboard上でImageViewを配置する

ドラッグします。

そして制約を付けます。（画面全体になるように)

先ほど用意した画像をセットして、ModeをAspect Fillにします。

３.ImageViewのカスタムクラスをAnimatableImageViewにする

クラス名をAnimatableImageViewにします。

するとAnimatableImageViewのプロパティが表示されます。

４.AnimatableImageViewのプロパティ設定

そのままだとキリン画像が明るすぎるのでプロパティで調整してみます。

トーンカラーを黄緑っぽくした場合

トーンカラーを赤っぽくした場合

こんな感じで画像の雰囲気を変える事が出来ます。

ログインフォームを作る

先ほど作成したキリン画像のページをログイン画面っぽくしましょう。

1.StackViewを配置する

フォームを配置する場所にUIStackViewを配置します。

制約も付けます。

StackViewのDistributionをFill Equallyにします。

2.StackViewにTextFieldを配置する×２

StackViewの中にユーザー名とパスワードの２つのTextFieldを配置します。

３.StackViewにButtonを配置する

TextFieldの下にButtonを配置します。ラベルも変えておきます。（今回は『ログイン』としました）

配置の準備は終わりました。ここからはIBAnimatableにおける設定です。

4.配置したコンポーネントのカスタムクラスをそれぞれ設定する

StackViewのカスタムクラス名をAnimatableStackViewにします。

TextFieldのカスタムクラス名をAnimatableTextFieldにします。

Buttonのカスタムクラス名をAnimatableButtonにします。

5.テキストフィールドをカスタマイズする

テキストフィールドに表示するためのアイコンを用意します。 こちらからお借りしてます。

テキストフィールドには以下のプロパティを設定しました。
- Fill Color : 背景色
- Border （Color、Width、Side） : 線
- Left Image : 画像 と 左右の余白

6.ボタンをカスタマイズする

ボタンには以下のプロパティを設定しました。
- Fill Color : 背景色

6.StackViewをカスタマイズする

StackView自体にはアニメーションをつけました。

AnimationTypeの種類はこちらを参照してください。

（ここまでの内容を）実行すると...

ログインフォームが登場する時にアニメーションします。（見難いかもしれませんが...）

ページ遷移させる

ログインボタンを押したら別のページに遷移する手順です。

1.遷移先と遷移元のViewControllerをカスタムクラスをAnimatableViewControllerにする

AnimatableViewControllerにします。

２.Segueを追加

Control+ドラッグでボタンから遷移先へのViewControllerへSegueを追加します。

すると今まで無かったSegueも追加されているので、遷移のアニメーションを選びます。

Seuge時のアニメーションはこちらをご覧ください。

３.Segueを確認

Segueを選択し、クラスを見ると選択したものになっています。

これで、ひとまず遷移はできました。次からは遷移先の画面に対して編集します。

グラデーションを爆速で作成する

1.任意のUIViewを用意し、クラスをAnimatableViewにする

AnimatableViewにします。

２.startColorとendColorに好きな色を設定する

startColorとendColorに好きな色を設定します。（画像は間違えてImageViewにしてしまいましたが...）

グラーデーションについて詳細はこちらをご覧ください。

マスクを使ってみる

1.任意のUIViewを用意し、クラスをAnimatableViewにする

今回は中にテキストを置いているViewを用意しました。数字の部分が中心位置になっています。
そして、AnimatableViewにします。

２.AnimatableViewのプロパティ設定

以下のプロパティを設定しました。
- Fill Color : 背景色
- Border （Color、Width） : 線
- Mask Type : Maskタイプ

マスクタイプの種類はいくつかあります。以下にタイプを変更した時の見え方を載せます。

Circle

まる

Polygon

ペンタゴン（六角形）

Triangle

さんかく

…中心の位置を調整する必要がありますね。

Star

星形

Wave

波

Parallelogram

ひし形

デモ

実行すると以下のような感じになります。

ページ間の雰囲気に統一感が無くて微妙ですが、雰囲気だけでも伝われば嬉しいです。

まとめ

ロードマップを見ると Version 4 では Sketch plugin 、 Version 6 では Xcode plugin と記載されいて個人的に期待しています。
IBAnimatableを使えば最初からアプリとして作れるので、実機で動かした時のイメージが違うとか、実装するのに凄く大変だったということが起こり難いのではと思います。