21
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

株式会社デジタルクエスト エンジニアAdvent Calendar 2016

Day 16

AfterEffectsを使えればiOSのアニメーションが作れる「Squall」が神ツールすぎた件

Posted at

自分で出したカジュアルなニュースアプリの企画が通り、開発できることになったとこから全ては始まった。
条件は開発期間1ヶ月、プロデューサー/ディレクター1名(自分)、エンジニア1名、デザイナーなし。

_人人人人人人人人人_
> デザイナーなし <
 ̄Y^Y^Y^Y^Y^Y^Y^Y ̄

そんな無謀な状況でもやらねばなるまい、それがクリエイターだ!!!!

#爆速開発のための試行錯誤
デザイナーがいないこと以外にも、1ヶ月(実質3週間程度しかない)中でアプリをリリースできる状態まで持っていくのは容易な話ではない。
ディレクターたるもの、巻き取れる作業は巻きとるべきだ。

そんな考えからエンジニア以外がアプリのアニメーションを作れないか、ということでツールを探してみたところ見つけたのがこの**「Squall」**というもの。

まだ今年リリースされたばかりでTipsはFBコミュニティしかない状態なので検証に1週間程度時間がかかったものの、この神ツールのおかげで納期を守れたと言っても過言ではない。

#Squallって何?
スクリーンショット 2016-11-29 17.18.56.png

とりあえずロゴだけでもいけてる、素晴らしい。
ここでちょっと説明。

SquallはAfterEffectsで作成したベクターアニメーションデータを独自ファイル(最新版はjson)に書き出す、もしくはコードで書き出しアプリ内で再現できるツール
つまり、動画制作に明るければ非エンジニアでもiOSアプリのアニメーションを作ることができる。

もうすこし具体的に言うと、AfterEffects内の拡張機能として動作し、アニメーションに関するデータを.sqaファイルとして生成。
アプリ側でSDKを実装することにより、.sqaファイル(独自ファイル)を動作させることができる。
コード書き出しの方もやってみたが、独自ファイルの方がどうも都合が良いっぽい。

スクリーンショット 2016-12-05 19.02.49.png

アニメーションのプレビューは専用アプリで行うことが出来、そこで再生できるものは全て問題なくアプリへ実装可能。(ループする場合を除く。)
エフェクトが使えないなどの制限はあるものの、アプリ開発のアニメーションにおいては救世主な気がする。
※Ver1.3時点ではAndroid、日本語版AfterEffectsには非対応。

ちなみにこのツールはMarcusEckert一人で作っている。
一人なのに下手なサービスよりCSも充実している。
つまりアマテラスオオミカミ的存在、嗚呼素晴らしい。

#実際どのくらいできるん?
d_1.gif
[記事:https://haru2.jp]

まずはこれを見てくれ、最高だろ?
これはリリースしたアプリで使ったもので左側がAEで作成した状態のもの、右側がアプリ実装後。
全く同じ動きを再現できている。

固定コンテンツのアニメーションだけでなく、動画内のシェイプレイヤーをキーとして画像やテキストをはめ込むことができることがわかってもらえると思う。
いや、これすごくない?

#ちなみに見本に出したアプリは…?
スクリーンショット 2016-12-05 19.12.58.png

こちらの「Drips」、ニュースの要点を抽出して、アニメーション付きで流れていくアプリ。
女性向けニュースだけどSquallをふんだんに使用して制作したアプリなので、導入する前にDLしてチェケ!
最後にこれから導入する人のために、使ってみてわかった注意点をまとめておくので合わせてチェケ!

#注意点

  • AfterEffectsのプリセットプラグインの使用は不可。(Perticle等)
  • 置き換えオブジェクトに対して動きをつけるのはNG。
    • 対策として、調整レイヤーを用意して動きをつける。
  • 置き換えオブジェクトの比率=置き換え後のオブジェクトの比率。
    • 例えば100%*80%のオブジェクトを置き換えると、縦に潰れる。
  • カスタムフォントをを使用する場合。
    • 固定の場合、シェイプレイヤーに。
    • 可変の場合、アプリ側にカスタムフォントを実装する。
  • シェイプを含む日本語テキストが入っている場合、バグが起こる。(Ver1.3時点)
  • 画像、テキストは挿入できるが、動画には非対応。
    • ビュー全体を動画にし、トランジションにビューインを使用することは可能。
  • アニメーションをループさせる場合はトランジションをつける場合、最初と最後にダミーでもタイムスタンプをつけることが必要。

※Ver1.3→Ver2.0で.sqaファイルの中身など全てが大幅変更されているので注意。

Created by 株式会社デジタルクエスト 山下 房之介
21
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?