#iOS QuartzCodeでローディングアニメーションをつくってみたまとめ

# [QuartzCode](http://www.quartzcodeapp.com/)
GUIでアニメーションを作れるコードジェネレータ
作ったアニメーションはSwiftとObjective-CでExportできる

:tada: TIPS: 同じようなジェネレータには、[**CoreAnimator**](http://www.coreanimator.com/#animatecode)もあります

# 完成形のローディングアニメーション

<img width="100" alt="loading.gif" src="https://qiita-image-store.s3.amazonaws.com/0/98613/db631566-1c3d-86d8-8cc0-862d4ce5f673.gif">

gifに変換したのでカクカクですが、本当は滑らかなアニメーションです :v:

# 前準備
1. http://www.quartzcodeapp.com/ に行く
2. **Free Trial**からダウンロード
3. QuartzCodeを開く

準備OKです:tada:！


# 手順
## 1. インジケータの形をつくる
インジケータの形は、Shapeをコピペしてつくります
今回は円形（Oval）でつくりますが、好きな形でOKです

### Shapes > Ovalと、Replicatorを選んで配置する
<img width="500" alt="1_shapes.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/ca82c4fa-50f8-cccc-f84e-e44f4b30ea0b.png">

Replicatorはとりあえずカンバスの中央に
円形は後でコピペするためにちょっと上の方に配置してみました
<img width="500" alt="2_position.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/5e02b1dc-bb57-4127-f275-e878c1dffa63.png">

### `Layer`上のOvalをドラッグしてReplicatorに入れる
Replicator > Ovalのように、レイヤー構造が変わりました
<img width="500" alt="3_drag.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/6279f310-61a5-a9d1-c61a-9706027bd60e.png">

### `Layers`上でReplicatorを選び、`Inspector`からリピート方法を設定する
今回は円形を10個複製して配置したいので、以下のように設定しました

* Instance Count（繰り返しの個数）: 10
* Rotation（回転）: Z軸を36° （360° / 10個）

<img width="500" alt="4_repeat.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/6e84e624-0e9d-9423-fc5b-b2d68027bfd8.png">

インジケータの形が出来上がりました :tada:

## 2. ローディングらしいアニメーションをつける
10個の円それぞれには、同じアニメーションをつけます
1つずつ順々にアニメーションの開始を遅らせるとローディングらしくなります

今回は、OpacityとTransformのScaleをいじってみます

### `Layer`でOvalを選び、`Timeline`上でOpacityとTransformを追加する
`＋ボタン`から追加します

<img width="500" alt="5_add.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/081f98f4-e90c-27ca-c924-b0ef3d3d0738.png">

追加すると`Timeline`上に表示されます
<img width="500" alt="6_added.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/ab0cc0fa-ccfe-443d-28f7-1f7459579474.png">


### `Keyframe Inspector`からOpacityの値を設定する
開始〜終了の間で、だんだん透明になっていく動きを以下のように設定します

* アニメーションのキーフレームが1秒の地点
* `Keyframe Inspector` > Opacity > Value : 0　（完全に透明にする）

<img width="500" alt="7_opacity.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/1c41b4fb-81e9-eedd-a3ad-12fca7b120ed.png">


### `Keyframe Inspector`からTransformの値を設定する
開始〜終了の間で、だんだん小さくなっていく動きを以下のように設定します

* アニメーションのキーフレームが1秒の地点
* `Keyframe Inspector` > Transform > Scale : x 0.2 （横を0.2倍にする）
* `Keyframe Inspector` > Transform > Scale : y 0.2 （縦を0.2倍にする）

<img width="500" alt="8_transform.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/064aa90d-70fd-7ba8-7f6f-d549590b25a7.png">

この時点で、すべての円形に同じ動きがついている状態です
このまま再生をすると、すべての円が開始〜終了で同時に消えていくアニメーションになっています

### `Layer`でReplicatorを選び、Instance Delayの値を設定する
各円形のアニメーションを少しずつ遅らせます
今回は円形を10個複製して配置したので、以下のように設定しました

* Instance Delay（繰り返しの個数）: 0.1　(アニメーションの長さ1秒 / 10個)

<img width="500" alt="9_delay.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/3e48deaa-fff1-1ecf-29da-5b6804e42cd8.png">

### `Timeline`のOvalを選択し、`Keyframe Inspector`でINF設定をONにする
`INFINIT`（無限）設定にすると、よしなにアニメーションを繰り返してくれます

<img width="500" alt="10_inf.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/98613/5c66e5b3-9bce-6d00-d9da-0bce4ba0368e.png">

これでアニメーションが完成です :tada::tada:

## 3. SwiftコードをExportする
### File > Export CodeでソースコードをExport
SwiftかObjective-Cかの選択、Swift3対応をするかどうかなどの諸々のオプションを設定できます

<img width="700" alt="code.png" src="https://qiita-image-store.s3.amazonaws.com/0/98613/ed00e67f-1b6a-2687-b341-3895cf1ac235.png">

# 生成されたコード
:tada: TIPS: 実装サンプルは https://github.com/mafmoff/QuartzCodeSample 

生成されるのは以下の2つ

#### LoadingView（クラス名は任意）
ソースコードは、[QuartzCodeSample/LoadingView.swift](https://github.com/mafmoff/QuartzCodeSample/blob/master/QuartzCodeSample/LoadingView.swift)

* 具体的なアニメーションの細かい設定が書かれている
* `@IBDesignable`指定ありなので、Storyboardに乗せてアニメーションスタートさせるだけで実装できる
* Storyboardからではなく、コードから生成することもできる


#### QCMethod.swift
ソースコードは、[QuartzCodeSample/QCMethod.swift](https://github.com/mafmoff/QuartzCodeSample/blob/master/QuartzCodeSample/QCMethod.swift) 

* Viewでどんなアニメが発生しても変わらない、共通メソッドの定義


# 参考
http://www.quartzcodeapp.com/examples/

# まとめ
## QuartzCode利用のメリット・デメリット
#### メリット

* アニメーションの面倒な計算をしなくて済む
* 実際に動きを再生しながら作れるので、コードを書いた後の調整が不要
* Exportすると、xib上でViewを載せてクラスを指定するだけで、実装完了
* しばらくアニメーションを書かないとなる浦島太郎状態にならなくて済む
* エンジニアじゃなくてもアニメーションが作れる

#### デメリット

* QuartzCodeのファイルをなくしたら、保守できない・作り直し
* `QCMethod.swift`の黒魔術感がすごく気になる
* 学習コストがかかる
* ドキュメントが英語で、用語がわからないと読みづらい
* $89.99と高い（CoreAnimatorよりは安い）
* 操作性がいまいち（ピンチイン・アウトなどでカンバスやタイムラインが拡大できないのが辛い）
* やりたいことをすべては実現できない


## 感想

生成されたコードを参考として利用して、整理して組み直すような使い方をしても良いかなと思います。
また、コードを保守できないのは辛いですが、アニメーションはガンガン変更が入るケースは少なそうなので、そこまでメンテ性は気にしなくてもいいかなと感じています。
できればもっと操作性が良くなると良いのにと、期待してしまいます！

以上です、ありがとうございました :tada: