iOS
5分でできる
QuartzCode

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

More than 1 year has passed since last update.


QuartzCode

GUIでアニメーションを作れるコードジェネレータ

作ったアニメーションはSwiftとObjective-CでExportできる

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


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

loading.gif

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


前準備



  1. http://www.quartzcodeapp.com/ に行く


  2. Free Trialからダウンロード

  3. QuartzCodeを開く

準備OKです:tada:


手順


1. インジケータの形をつくる

インジケータの形は、Shapeをコピペしてつくります

今回は円形(Oval)でつくりますが、好きな形でOKです


Shapes > Ovalと、Replicatorを選んで配置する

1_shapes.PNG

Replicatorはとりあえずカンバスの中央に

円形は後でコピペするためにちょっと上の方に配置してみました

2_position.PNG


Layer上のOvalをドラッグしてReplicatorに入れる

Replicator > Ovalのように、レイヤー構造が変わりました

3_drag.PNG


Layers上でReplicatorを選び、Inspectorからリピート方法を設定する

今回は円形を10個複製して配置したいので、以下のように設定しました


  • Instance Count(繰り返しの個数): 10

  • Rotation(回転): Z軸を36° (360° / 10個)

4_repeat.PNG

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


2. ローディングらしいアニメーションをつける

10個の円それぞれには、同じアニメーションをつけます

1つずつ順々にアニメーションの開始を遅らせるとローディングらしくなります

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


LayerでOvalを選び、Timeline上でOpacityとTransformを追加する

+ボタンから追加します

5_add.PNG

追加するとTimeline上に表示されます

6_added.PNG


Keyframe InspectorからOpacityの値を設定する

開始〜終了の間で、だんだん透明になっていく動きを以下のように設定します


  • アニメーションのキーフレームが1秒の地点


  • Keyframe Inspector > Opacity > Value : 0 (完全に透明にする)

7_opacity.PNG


Keyframe InspectorからTransformの値を設定する

開始〜終了の間で、だんだん小さくなっていく動きを以下のように設定します


  • アニメーションのキーフレームが1秒の地点


  • Keyframe Inspector > Transform > Scale : x 0.2 (横を0.2倍にする)


  • Keyframe Inspector > Transform > Scale : y 0.2 (縦を0.2倍にする)

8_transform.PNG

この時点で、すべての円形に同じ動きがついている状態です

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


LayerでReplicatorを選び、Instance Delayの値を設定する

各円形のアニメーションを少しずつ遅らせます

今回は円形を10個複製して配置したので、以下のように設定しました


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

9_delay.PNG


TimelineのOvalを選択し、Keyframe InspectorでINF設定をONにする

INFINIT(無限)設定にすると、よしなにアニメーションを繰り返してくれます

10_inf.PNG

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


3. SwiftコードをExportする


File > Export CodeでソースコードをExport

SwiftかObjective-Cかの選択、Swift3対応をするかどうかなどの諸々のオプションを設定できます

code.png


生成されたコード

:tada: TIPS: 実装サンプルは https://github.com/mafmoff/QuartzCodeSample

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


LoadingView(クラス名は任意)

ソースコードは、QuartzCodeSample/LoadingView.swift


  • 具体的なアニメーションの細かい設定が書かれている


  • @IBDesignable指定ありなので、Storyboardに乗せてアニメーションスタートさせるだけで実装できる

  • Storyboardからではなく、コードから生成することもできる


QCMethod.swift

ソースコードは、QuartzCodeSample/QCMethod.swift


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


参考

http://www.quartzcodeapp.com/examples/


まとめ


QuartzCode利用のメリット・デメリット


メリット


  • アニメーションの面倒な計算をしなくて済む

  • 実際に動きを再生しながら作れるので、コードを書いた後の調整が不要

  • Exportすると、xib上でViewを載せてクラスを指定するだけで、実装完了

  • しばらくアニメーションを書かないとなる浦島太郎状態にならなくて済む

  • エンジニアじゃなくてもアニメーションが作れる


デメリット


  • QuartzCodeのファイルをなくしたら、保守できない・作り直し


  • QCMethod.swiftの黒魔術感がすごく気になる

  • 学習コストがかかる

  • ドキュメントが英語で、用語がわからないと読みづらい

  • $89.99と高い(CoreAnimatorよりは安い)

  • 操作性がいまいち(ピンチイン・アウトなどでカンバスやタイムラインが拡大できないのが辛い)

  • やりたいことをすべては実現できない


感想

生成されたコードを参考として利用して、整理して組み直すような使い方をしても良いかなと思います。

また、コードを保守できないのは辛いですが、アニメーションはガンガン変更が入るケースは少なそうなので、そこまでメンテ性は気にしなくてもいいかなと感じています。

できればもっと操作性が良くなると良いのにと、期待してしまいます!

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