QuartzCode
GUIでアニメーションを作れるコードジェネレータ
作ったアニメーションはSwiftとObjective-CでExportできる
TIPS: 同じようなジェネレータには、CoreAnimatorもあります
完成形のローディングアニメーション
gifに変換したのでカクカクですが、本当は滑らかなアニメーションです 
前準備
- http://www.quartzcodeapp.com/ に行く
- Free Trialからダウンロード
- QuartzCodeを開く
準備OKです！
手順
1. インジケータの形をつくる
インジケータの形は、Shapeをコピペしてつくります
今回は円形（Oval）でつくりますが、好きな形でOKです
Shapes > Ovalと、Replicatorを選んで配置する
Replicatorはとりあえずカンバスの中央に
円形は後でコピペするためにちょっと上の方に配置してみました
Layer上のOvalをドラッグしてReplicatorに入れる
Replicator > Ovalのように、レイヤー構造が変わりました
Layers上でReplicatorを選び、Inspectorからリピート方法を設定する
今回は円形を10個複製して配置したいので、以下のように設定しました
- Instance Count（繰り返しの個数）: 10
- Rotation（回転）: Z軸を36° （360° / 10個）
インジケータの形が出来上がりました
2. ローディングらしいアニメーションをつける
10個の円それぞれには、同じアニメーションをつけます
1つずつ順々にアニメーションの開始を遅らせるとローディングらしくなります
今回は、OpacityとTransformのScaleをいじってみます
LayerでOvalを選び、Timeline上でOpacityとTransformを追加する
＋ボタンから追加します
追加するとTimeline上に表示されます
Keyframe InspectorからOpacityの値を設定する
開始〜終了の間で、だんだん透明になっていく動きを以下のように設定します
- アニメーションのキーフレームが1秒の地点
-
Keyframe Inspector> Opacity > Value : 0 （完全に透明にする）
Keyframe InspectorからTransformの値を設定する
開始〜終了の間で、だんだん小さくなっていく動きを以下のように設定します
- アニメーションのキーフレームが1秒の地点
-
Keyframe Inspector> Transform > Scale : x 0.2 （横を0.2倍にする） -
Keyframe Inspector> Transform > Scale : y 0.2 （縦を0.2倍にする）
この時点で、すべての円形に同じ動きがついている状態です
このまま再生をすると、すべての円が開始〜終了で同時に消えていくアニメーションになっています
LayerでReplicatorを選び、Instance Delayの値を設定する
各円形のアニメーションを少しずつ遅らせます
今回は円形を10個複製して配置したので、以下のように設定しました
- Instance Delay（繰り返しの個数）: 0.1 (アニメーションの長さ1秒 / 10個)
TimelineのOvalを選択し、Keyframe InspectorでINF設定をONにする
INFINIT（無限）設定にすると、よしなにアニメーションを繰り返してくれます
これでアニメーションが完成です
3. SwiftコードをExportする
File > Export CodeでソースコードをExport
SwiftかObjective-Cかの選択、Swift3対応をするかどうかなどの諸々のオプションを設定できます
生成されたコード
TIPS: 実装サンプルは https://github.com/mafmoff/QuartzCodeSample
生成されるのは以下の2つ
LoadingView（クラス名は任意）
ソースコードは、QuartzCodeSample/LoadingView.swift
- 具体的なアニメーションの細かい設定が書かれている
-
@IBDesignable指定ありなので、Storyboardに乗せてアニメーションスタートさせるだけで実装できる - Storyboardからではなく、コードから生成することもできる
QCMethod.swift
ソースコードは、QuartzCodeSample/QCMethod.swift
- Viewでどんなアニメが発生しても変わらない、共通メソッドの定義
参考
まとめ
QuartzCode利用のメリット・デメリット
メリット
- アニメーションの面倒な計算をしなくて済む
- 実際に動きを再生しながら作れるので、コードを書いた後の調整が不要
- Exportすると、xib上でViewを載せてクラスを指定するだけで、実装完了
- しばらくアニメーションを書かないとなる浦島太郎状態にならなくて済む
- エンジニアじゃなくてもアニメーションが作れる
デメリット
- QuartzCodeのファイルをなくしたら、保守できない・作り直し
-
QCMethod.swiftの黒魔術感がすごく気になる - 学習コストがかかる
- ドキュメントが英語で、用語がわからないと読みづらい
- $89.99と高い（CoreAnimatorよりは安い）
- 操作性がいまいち（ピンチイン・アウトなどでカンバスやタイムラインが拡大できないのが辛い）
- やりたいことをすべては実現できない
感想
生成されたコードを参考として利用して、整理して組み直すような使い方をしても良いかなと思います。
また、コードを保守できないのは辛いですが、アニメーションはガンガン変更が入るケースは少なそうなので、そこまでメンテ性は気にしなくてもいいかなと感じています。
できればもっと操作性が良くなると良いのにと、期待してしまいます！
以上です、ありがとうございました