Aftereffectsで作成したsvgアニメーションをBodymovinを使って超カンタンにweb上で動かす方法

Aftereffects extensionのbodymovinと、Airbnb製のライブラリであるLottieを使って、ネイティブアプリ上でアニメーションを実現する方法をすでに2回に分けて紹介しました。

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

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

これらの記事を書いた直後、何人かにWeb上でできないの?という質問を受けたので、今回はAftereffectsで作成したアニメーションを、SVGアニメーションで動かす方法をご紹介したいと思います。

僕が作成したインタラクティブなSVGアニメーションをこちらに掲載していますのでよかったら御覧ください。

SVG Animations

なぜSVGアニメーションなのか

ブラウザ上でアニメーションを実装する方法は、cssであったりjQueryだったり多数存在しますが、その中でも僕は断然このSVGアニメーションを推したい。理由は以下の通り。

  • 1. jpgやpngといった画像を使用しないのでファイルサイズが軽量
  • 2. ベクターなので滑らかで美しい。デバイスの解像度を気にする必要もない。
  • 3. 他プラットフォ―ムでアニメーションリソースの使いまわしが可能

1と2は、SVGアニメーションというよりはSVGの利点。3に関しては今回紹介するBodymovinを使った場合に限定されてしまうかもしれませんが、JSONを書き出してしまえば、iOS, android, reactネイティブなどの他プラットフォームでカンタンに実装することができる上に、アニメーションを一元管理することも出来ます。

ただ、SVGアニメーションってJSめちゃくちゃ書けるエンジニアの仕事だと思ってませんか?JSそんなにわからないデザイナーでもできます!今回はbodymovin.jsという、javascriptのライブラリを使用して、サクサクっと実装してしまいましょう。

BodymovinをつかってJSONファイルを生成する

AfterEffectsにプロジェクトからJSONを生成するためのエクステンションを入れ、実際にJSONを書き出します。詳しいインストール方法と、書き出しの方法はこちらの過去記事に記載してありますので参考にしてください。

Bodymovin.jsを使おう

先程AfterEffectsのエクステンションを使うためにダウンロードしたリポジトリ(bodymovin)の中のbuild/player/に入っているbodymovin.jsをプロジェクトに読み込ませてください。

次に、SVGアニメーション用の箱を用意します。

最後に以下の設定を行うだけです。

animData{}の中で、アニメーションの設定を行っています

  • container SVGアニメーション用に作った箱を指定。
  • render ‘svg’ / ‘canvas’ / ‘html’ の中から選択。
  • loop animationを連続で再生するかどうか指定。
  • autoplay animationを自動で再生するかどうか指定。
  • path AfterEffectsから書き出したJSONまでのパスを記載。とても大事です。

Demo

さいごに

とてもカンタンにSVGアニメーションをあなたのウェブサイトで実現できることがお分かりいただけたかと思います。ただ、Bodymovinも万能では無いみたいで、AfterEffectsの一部の機能に対応していなかったりします。出来ないこと、対策方法などについても今後書いていきます。

このような”アウトプットにつながるインプット”を日々やりまくってます。一緒に最先端を走りませんか!?テクノロジーで誰かを幸せにしたいアルバイト、インターン募集しています!

ランチのお誘いも大歓迎!!DMください🐤



続きを読む

デザイナー向け – 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を入力すれば完了です

お疲れ様でした

続きを読む