Help us understand the problem. What is going on with this article?

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

More than 3 years have 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:

meSummery
Wang-wang🐕🐩!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした