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

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

Clock Icon2016.06.13

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

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

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

https://github.com/JakeLin/IBAnimatable

ライセンスはMITです。

どんなのが作れるの?

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

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

試した環境

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

Xcode 7.3.1
Swift 2.2
CocoaPods 1.0.0

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

準備

CocoaPodsで追加します。

use_frameworks!

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

実装

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

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

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

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

画像の用意

2.Storyboard上でImageViewを配置する

ドラッグします。

UIImageViewを配置

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

制約をつける

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

画像を設定

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

クラス名をAnimatableImageViewにします。

カスタムクラスにする

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

専用プロパティが現れた

4.AnimatableImageViewのプロパティ設定

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

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

トーンカラー黄緑

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

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

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

ログインフォームを作る

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

1.StackViewを配置する

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

StackViewを置く

制約も付けます。

制約つける

StackViewのDistributionFill Equallyにします。

Fill Equallyにするよ

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

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

テキストフィールド

3.StackViewにButtonを配置する

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

ボタンを配置

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

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

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

AnimatableStackView

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

AnimatableTextField

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

AnimatableButton

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

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

アセット

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

プロパティ変更

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

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

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

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

あにめーしょんをつける

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

(ここまでの内容を)実行すると...

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

demo1

ページ遷移させる

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

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

AnimatableViewControllerにします。

カスタムクラスを設定

2.Segueを追加

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

segueの追加

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

見たことないやつが増えてる

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

3.Segueを確認

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

かくにんすると

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

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

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

AnimatableViewにします。

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

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

ぐらでーしょん

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

マスクを使ってみる

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

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

2.AnimatableViewのプロパティ設定

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

マスクプロパティ

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

Circle

まる

Circle

Polygon

ペンタゴン(六角形)

Polygon

Triangle

さんかく

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

Star

星形

Star

Wave

Wave

Parallelogram

ひし形

Parallelogram

デモ

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

6月-09-2016 17-40-31

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

まとめ

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

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.