QuartzCode

GUIでアニメーションを作れるコードジェネレータ
作ったアニメーションはSwiftとObjective-CでExportできる

TIPS: 同じようなジェネレータには、CoreAnimatorもあります

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

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

前準備

1. http://www.quartzcodeapp.com/ に行く
2. Free Trialからダウンロード
3. 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よりは安い）
• 操作性がいまいち（ピンチイン・アウトなどでカンバスやタイムラインが拡大できないのが辛い）
• やりたいことをすべては実現できない

感想

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

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