After Effectsで作成したアニメーションをネイティブアプリで再生するAirbnb製のライブラリを使ってみた【後編】

前編(https://tondemodesign.com/tried-lottie-1/)では、Airbnb製のライブラリがAfterEffectsアニメーションを読み込めるように、Bodymovinを使ってJSONファイルを書き出すところまでをやりました。

今回は実際にLottieを使って、nanameue社のエンジニアシューちゃん( @wildstarzw )にandroidアプリに組み込んでもらいました。本記事では、Lottieを使ったプロジェクトでデザイナーがなにをすべきかにフォーカスしています。エンジニアがやるべきLottieの実装方法を詳しく説明している記事ではありませんのであしからず。エンジニアの方はシューちゃんに質問してね ( @wildstarzw ) 。

Repeatは何故か無視される

こちらのアニメーションを組み込んでもらおうとしたところ、うまく行きませんでした。実際に実装してもらったときのアニメーションがこちら 

AfterEffectsでは、1つの球の動きをつくり、Repeat機能を使って球を4つ、90度ずつずらして配置する設定にしていました。おそらくこのRepeatの部分が無視されています。Repeat機能を使う場合は、Repeatしたものをそれぞれオブジェクトに置換する必要があるみたいです。

画像を含むAfterEffectsファイルにはまだ未対応

次に実装をお願いしたのが上のアニメーション。こちらのアニメーションはpng画像を2枚使用しています。

このプロジェクトをBodymovinを使って書き出すと、imageフォルダが作られてしまいます。

調べたところ公式アナウンスに、イメージの対応はこれからの予定と書かれていました。

In addition to all of the After Effects features and API additions we’ve worked on so far, we have many ideas for the future. These include mapping views to Lottie animations, controlling view transitions with Lottie, support for Battle Axe’s RubberHose, gradient, type, and image support.

ここまで取り組んできたAfterEffectsの機能やAPIの開発に加えて、このさきやりたいこともたくさんあります。Lottieアニメーションのマッピングビューをつくったり、Lottieでviewのトランジションを制御したり、Battle AxeのRubberHose、グラデーション、文字入力、それからイメージもサポートしていくつもりです。

こちらに関しては、Lottieのアップデートを待つか、自分なりに魔改造するかしか解決方法はなさそうです。

画像が駄目でもベクターならOK

画像が使えないとなると、複雑なイラストをAfterEffectsで描くしかないのかというとそんなこともありません。ベクターを使えば良いのです。

やり方

イラレファイルをAfterEffectsで読み込みます。タイムラインにイラレファイルを置いたら、右クリック>ベクトルレイヤーからシェイプを作成。

ベクターデータとしてAfterEffects上で扱うことが出来るようになりました。画像を含まないデータなので、Bodymovinを使って書き出したデータにもimageフォルダが作成されずに、うまいことandroidアプリで動かすことが出来ました。

まとめ

画像ファイルには対応していませんでしたが、イラストレーターで描いた複雑なイラストもカンタンにアプリに実装できることがわかりました。JSONファイルを渡してから、シューちゃんは15分程でアプリ(android)に組み込んでくれました。エンジニアがすべきことは正確にはわかりませんが、導入コストはさほど高くないのではないでしょうか。

この先、更に便利な機能を実装する予定だとAirbnbの公式アナウンスも宣言してますし、今後に期待です。リッチアニメーションがネイティブアプリのスタンダードになる日も近いかもしれません!


続きを読む

After Effectsで作成したアニメーションをネイティブアプリで再生するAirbnb製のライブラリを使ってみた【前編】

先日、アプリにリッチなアニメーションを取り入れるための方法の一つとして、PNG画像を複数枚書き出し、画像切り替えのプログラムを書いてもらうという方法を提案しました。( デザイナー向け – iOSアプリ用に豊かなUIアニメーションを作る方法 | Tondemo Design Blog )

2017年2月1日に、Airbnbがアニメーションを, iOS, android, React Nativeに取り入れるためのライブラリを発表。名前はLottie。

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin.

Lottie : Airbnb Design

LottieはAfterEffectsのアニメーションをリアルタイムで描画できるiOS, Android, React Nativeのライブラリです。デフォルトで搭載されているアセットと同じくらいカンタンに、アニメーションをネイティブアプリで使用できるようになります。Bodymovinと呼ばれるオープンソースのAfterEffectsのエクステンションによって、JSONファイルで書き出されたアニメーションデータを使用します。

と、公式サイトにも書かれているとおり、実装までのフローは以下の通り。

1. AfterEffectsにBodymovinと呼ばれるプラグインをインストールし、JSONファイルをエキスポート

2. Lottieを使って、エキスポートしたJSONファイルを組み込む

今回は1のみをご紹介(2は現在知り合いのiOSエンジニアに試してもらっています)。

Bodymovinをインストール

Zipファイルをダウンロードしてきます。 GitHub – bodymovin/bodymovin: after effects to html library

プラグインのインストールに使うので、ZXPインストーラーもインストールしましょう。ZXP Installer – rescripts + aeplugins – aescripts.com

先程ダウンロードしてきたbodymovin-master.zipを解凍したら “bodymovin-master > build > extension” の中にあるbodymovin.zxpを、ZXPインストーラーにドラッグ・アンド・ドロップします。以上でプラグインのインストールは完了です。

GitHub – airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

JSONデータを書き出す

AfterEffectsで、作成済みのプロジェクトを開きます。ウィンドウ > 拡張機能 > Bodymovinを選択しましょう。書き出したいコンポジション選択し、書き出す場所を設定したら、Renderを押します。以上で終了です。

ここでスクリプトによるファイルへの書き込みとネットワークへのアクセスを許可してくださいというエラーが出る場合、AfterEffectsの 環境設定 > 一般の中にある”スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可”にチェックを入れるとうまくいきます。

まとめ

まだNativeアプリに実装していないので、使い勝手は判断できかねますが、デザイナーがやるべきことは非常にシンプルです。Airbnb製のライブラリ次第で、アニメーションの実装が劇的に簡単なものになることが期待できます。知人がLottieで僕のJSONデータをアプリに組み込んでくれたらまた続きをレポートします!


続きを読む

AfterEffectsでつくるUIアニメーションその1 – ScaleとEasing

以前こちらの記事でAfterEffectsを使って作ったアニメーションを、アプリ用に書き出すまでの方法を書きました。

デザイナー向け – iOSアプリ用に豊かなUIアニメーションを作る方法

今回はUIアニメーションを作るためのAfterEffectsの使い方を、簡単なアニメーションを作りながら解説していきたいと思います。今回作成するのは簡単な拡大縮小のアニメーションです。

新規コンポジションを作成する

今回は80pxから100pxに拡大したあと80pxにふたたび戻るアニメーションを作ります。コンポジションのサイズは円が最も大きいときの100 x 100にします。

AfterEffectsのウィンドウ – 各ウィンドウと機能

コンポジションを作成したら下の画像のような画面になったと思います。AfterEffectsは主に4つウィンドウから構成されています。さらっとどこで何をするのか見ていきましょう。

0. ツールバー

選択中のツールによって、やれることが変わってきます。このあたりはphotoshopやsketchと似ているので問題ないと思います。

1. プロジェクトウィンドウ

ここは、アニメーションに使う素材をおいておく素材置場です。アニメーションに必要な素材をこちらにまずドラッグしてくることで、素材をアニメーション内で使うことができるようになります。

2. メインパネル

ここは、アニメーションに使う素材をおいておく素材置場です。アニメーションに必要な素材をこちらにまずドラッグしてくることで、素材をアニメーション内で使うことができるようになります。

3. その他ウィンドウ

整列パネルや、プレビューパネルなどがあったりします。個人的にはあまり使いません。

4. タイムライン&レンダーキューウィンドウ

レイヤーにアニメーションを加えたり、レイヤーのスタイルなんかも編集するのがこのウィンドウです。タブでが後ろ側にあるレンダーキューウィンドウに切り替えることもできます。レンダーキューウィンドウでは動画出力の設定を行います。

新規レイヤーを作成する

今回はプロジェクトウィンドウに画像ファイルを持ってくる必要はありません。代わりに円形のレイヤーを作成しましょう。ツールバーの図形ツールを選択肢ます。

デフォルトでは長方形ツールになっているので、長押しで図形ツールのオプションを出して楕円形ツールを選択しましょう。

ツールバーのアイコンが楕円に変わりました。この状態で、メインパネルにドラッグで円を書くことも出来ますが、それだとアニメーションさせるのに非常に都合が悪いです(アンカーポイントが図形の中心からずれてしまうため)。図形をメインパネル中央に表示させるには、ツールバーの楕円アイコンをダブルクリックしましょう。

メインパネルいっぱいの円が中央に表示されました。

タイムラインウィンドウにシェイプレイヤー1というファイルが追加されていることも確認しておいて下さい。

レイヤーの大きさを編集

作成したレイヤーはメインパネルいっぱいに表示されています。つまり、縦横が100pxになっている状態です。これを80pxに変更します。タイムラインウィンドウを見ていきましょう。シェイプレイヤー1というファイル名の左にある三角マーク▶を押してこのようにオプションを展開しましょう。

展開すると、コンテンツとトランスフォームというオプションが出現します。このトランスフォームの中のスケールを100から80に変更しましょう。

レイヤーの色を変更

今度はコンテンツ > 楕円形 1 > 塗り > カラーを編集します。カラーの右側にある長方形をクリックするとカラーウィンドウが現れます。今回は#4990E2に設定しました。

タイムラインを編集

タイムラインを編集して、先程の円形に動きをつけていきます。先程編集したトランスフォーム>スケールの左にあるストップウォッチアイコンをクリックしましょう。ストップウォッチアイコンが青く点灯し、タイムラインにダイヤモンドのかたちが現れたと思います。

次に時間インジケーターと呼ばれるバーを20fのところに移動させて、スケールを100に変更してみましょう。ここまで出来たらスペースキーを押してアニメーションを再生させてみて下さい。先程の一連の作業で、0秒のときにスケール80から20f秒のときにスケール100にするというアニメーションを設定していたんですね。

ここまで来るとなんとなくあらゆるエフェクトの付け方も想像がついたのではないでしょうか?スケールの他にも位置、回転、不透明度など、さまざまなスタイルを動かすことができるので試してみて下さい。

一度大きくした円を最後にもとに戻さなければいけないので、26f秒のところに時間インジケーターを持っていき、スケールを80に戻します。再度スペースを押して動作を確認して下さい。一度大きく膨らんでもとに戻る円のアニメーションの完成です。

イージング(加減速)を編集

ただ、このままだとあまり気持ちのいいアニメーションとはいえませんね。そこで編集するのがイージングとよばれる加速、減速を司る関数です。jQueryやcssアニメーションに馴染みのある方だと聞いたことがあると思います。

楕円レイヤーのスケールを選択した状態で、グラフアイコンをクリックしましょう。先程はダイヤモンドがポツポツ置いてあるタイムラインが表示されていましたが、折れ線グラフのようなものに切り替わりました。こちらもグラフのx軸やy軸などはあまり気にせずにどこをいじればどうなるのかだけを説明するので、あとはひたすら自分で触りまくって慣れてください。

折れ線グラフの点の部分をクリックすると、黄色くハイライトされます。黄色くハイライトされている状態でイージーイーズアイコンをクリックします。

すると、グラフの点からハンドルが生えてきました。このハンドルを伸ばしたり、角度を変えることによって、イージングを編集することが出来ます。いろいろ試して、気持ちがいいアニメーションを作ってみましょう。

なお、”気持ちいいアニメーションってなに?見当もつかない”という方はこちらのMaterial design guidelines – Googleを参考にしてみて下さい。車の発進と停車に代表されるように、地球上では万物はゆっくりと加速してゆき、ゆっくりと停まりますね。Material design guidelinesでは、UIアニメーションもそういった現実世界のモノに近づけることによって”自然さ”を実現しようとしています。

まとめ

今回はAfterEffectsの基本的な操作方法を、簡単な実例を交えて説明しました。今後はアニメーションのコピーの方法、ファイル管理の方法、複数のコンポーネントを持つ複雑なアニメーション作成の方法など、なかなか調べても出てこない部分を解説していきたいと思います。

続きを読む

デザイナー向け – iOSアプリ用に豊かなUIアニメーションを作る方法

・iOSアプリにリッチなアニメーションを取り入れたいけどエンジニアのリソースがない ・エンジニアがそもそもアニメーションに興味がないそんな状況にフラストレーションを抱えているデザイナーさん、意外と多いんじゃないでしょうか? 私が以前勤めていたnanameueでは複数のpng画像をパラパラ漫画のように高速で切り替えてアニメーションを作る方法を採用していました

untitled-3
ひま部のハートアニメーション

この方法では、デザイナーがアニメーションを用意し、各解像度ごとに切り出すという作業をおこなうことになります(最初は結構たいへんです)。しかし一方でエンジニアは1度パラパラ漫画のコードを作ってしまえば、受け取った画像をそのコードに組み込んでしまうだけで複雑なアニメーションもサクッとつくれちゃいます。 私の場合、エンジニアのメンバーにはこちらを見せたら理解してくれました

http://qiita.com/appwatcher/items/e6199ef662ef5172dada

*これからご説明する内容は、私がほぼ独自に”編み出した”おそらくかなり外道な方法です。AfterEffectsに関してしっかりとした教育を受けたわけでも、特定の参考書(UIアニメーション製作の本なんてあるのかな)を参考にしたわけでもありません。あくまでも私の個人的な手法なので、参考程度にしてください。また間違いなどありましたら、優しく教えてくださるとうれしいです!

Aftereffectsでアニメーションを作る

フレームの大きさを決める

まずはAfterEffectsで、フレームの大きさを決めます。フレームとはSketch3やイラストレーターで言うところの”アートボード”です。

今回はこちらのハートのアニメーションを作ります。AfterEffectsでは最も大きいサイズ(@3x)で作って、後ほど小さい解像度用に縮小しましょう。20ptの@3xなので60px x 60px がフレームのサイズです。

AfterEffectsの設定

⌘ + N で新規コンポジションを作成します(コンポジションはAfterEffectsにおけるプロジェクトのようなものです)

・1つ目の赤枠に先程決定したフレームサイズ(60×60)を入力しましょう。

・2つ目の赤枠にはアニメーションの長さを入力します。

・今回は1秒にしておきました。後からでも変更可能です。

その他は色々有りますがそんなに気にしなくて大丈夫(のはず)です。

終わったらOKを押しましょう

コンポジションが出来ました。

これからアニメーションを実際に作っていくわけですが、今回は長くなりそうなので別記事にてご紹介したいと思います。

ということで、はい、こちらが完成したハートのアニメーションです。

レンダリング

動画ファイルを書き出しましょう。

まずは メニュー > コンポジション > プリレンダリング

ウィンドウの下部にレンダーキューというのが現れるので、赤枠の”レンダリング”を押しましょう

レンダリングやらプリレンダリングやらなんなの?という疑念を抱くのは当然だと思います。

私も以前気になって調べてみました。

以下アドビサポートより抜粋

レンダリングとは レンダリングとは、ムービーを構成するフレームをコンポジションから作成することです。フレームのレンダリングでは、合成された 2 次元のイメージが、そのイメージのモデルを構成するコンポジション内のレイヤー、設定などのすべての情報から作成されます…
ご覧のようにアドビサポートさんはあまり下々の者にわかるようなお言葉を使ってくれないので、私のようなものは”あ、プリレンダリングしてレンダリングすると動画ファイルが出てくるんだね”くらいに考えています。001-007

.movという拡張子でファイルが出力されました。

以上でAfterEffects側での作業は終了です。

Photoshopで画像ファイルに変換する

先程の動画ファイルをPhotoshopで読み込みます

メニュー > ファイル > 読み込み > ビデオフレームからレイヤー

heart animation.movを選択

このような画面になります。

下の”タイムライン”が表示されていない場合は、 ウインドウ > タイムライン にチェックマークを入れると表示されるようになります。

タイムラインのすべてのフレームを選択した状態で、 メニュー > ファイル > レイヤーからファイル

これで、動画を画像に変換できました。

Sketchから解像度ごとに書き出す

別にPhotoshopでやれるよ、という方はPhotoshopでそのまま書き出してもらってもかまいません。 ここでは私の個人的な方法をご紹介します。

アートボードをファイルの数だけ用意する

sketchでは、@2xで基本的にプロジェクトを作っているので、今回も例外なく@2xでアートボードを作ります。 20ptの 2x なので、40px x 40pxですね。 ファイル数は30あったので、縦横40pxのアートボードを30個作りましょう

このときに、連番でアートボードに名前をつけてExportの設定を行っておいて下さい Exportの設定はMarketchから行うと1クリックで済んで便利です

さきほどのファイルをsketchに持ってきましょう。 するとこんな感じになるはずです。

001-014

これらのファイルサイズは@3xに合わせているので、以下の方法でリサイズします。

  1. すべてのファイルを選択
  2. 縦横比が固定されていることを確認して、width、もしくはheightを1.5で割る(今回は60/1.5と入力)

@3xの画像を@2xにすることが出来ました あとは順番通りアートボードにファイルを入れていって、Exportボタンを押せば完了です。 この作業がかなり面倒なので、この手順をさくっと終わらせる裏技をご紹介

裏技

ファイルを全て選択した状態で”Make Grid”する

001-015

①には1と入力
②にはファイルの数を入力
③にはアートボード間のMarginを入力します。

きれいに並んだように見えますが、Make Gridの仕様上、左に一番最後のフレームが来てしまっています。

アートボードは左から準に0, 1, 2, 3とならんでいるので、このままでは逆再生されてしましますね。

ファイルを全選択
グループ化
Rotateで180°回転させます

001-018

グループ化を解除して、水平にFlip、垂直にFlipをそれぞれ押します

001-019

一つづつ選択して↓を押していくと、アートボード内に入っていきます

001-020

すべてのファイルが見えなくなったら、全体をドラッグして全ファイルを選択し、赤枠のX, Yに0を入力すれば完了です

お疲れ様でした

続きを読む