Body movinを使ってうざい♡ボタンとかを作ってみた

みんな大好き♡ボタン

前回の記事で、After Effects(AE)を利用して、アプリのアニメーションアイコンが作れる、AirbnbのLottieを紹介しました。

Airbnbのデザイナーブログが見せてくれたもの

実際に動かしてみたくなり、（アプリ開発は知識が乏しいので、、、）Lottieではないのですが、bodymovinでhtml上で動くSVGアニメーションを作ってみました。超簡単です。

body movinとは？

AEで作ったアニメーションをJSONではきだしてくれる、エクステンションです。Lottieと相性がいいらしい。

After Effectsの詳しい使い方は今回は省きます。注意しなければならないのは、エフェクトはほとんど利用できない、という点です。

導入してみた！

以下をダウンロードします

• bodymovin
• ZXP Installer

詳細な導入はkayacさんのエンジニアブログが親切

svg / canvas出力ができるbodymovinの紹介 - KAYAC engineers' blog

作ってみた！

AE初心者すぎてそんなに凝ったことできてない

今回は、ハートをウィグラーでグイグイ動かしてそのあとにジワーッとハートが大きくなる、という超簡単なアニメーションを作りました（完成品は後ほど）

ウィンドウ＞拡張機能＞bodymovinを開くと、書き出すコンポジションの指定ができるので

書き出したいやつを選んで・・・

そのまま書き出すと、JSONが書き出されるのですが、多分みんなすぐHTMLのデモとかがみたいと思うので、Settingを押して、

色々な書き出し方法が選べます

Demoにチェックを入れて、書き出すと、すぐに確認できるHTMLファイルも一緒に書き出されます。

aiファイルを使うときのTips

aiファイルで読み込んだ素材を、bodymovinで書き出すと画像が荒くなってしまいました。

なかなかうまくいかず、ググりにググってみたところ、超ありがたツイートが・・・！どうやらaiファイルは勝手にpngに変換されちゃうみたいですね

「各ソース選んで右クリ＞ベクトルレイヤーからシェイプに変換」で解決

結果できたのが・・・？

逃げ回ってなかなかクリックさせてくれない、と思いきや急に止まりうざい主張を繰り返してくるハート

超キモい・うざい、と社内の一部で話題に

サーバーにもあげてみました

http://kmdrism.com/kmdr_study/07_bodymovin/01_yaba_heart/demo.html

ここまで難しいコードも書いておらず、ただただキーフレームをぽちぽちしてただけです。

他にもどこでも使えそうな奴作りました

文字の輪郭を描いて、背景がジワーと浮かび上がって、そして消えていく文字

ちゃんとかわいいのも作りました

http://kmdrism.com/kmdr_study/07_bodymovin/02_kmdrism/demo.html

参考：

まとめ

以前にもsvgの動画をWeb上で表示して、アニメーションをさせるのをトライしたことがあったのですが、なかなかコードだけ見てても思い通りにならなくて、モヤモヤしたことがありました。

今回のやり方はAE上でフィードバックを得ながら作り込んでいくことができるので、とても簡単ですし、クリックなどのイベントとも紐づけると、インタラクションの上でも表現の幅が広がります。

svgやそれのアニメーションの表現を、WebやAppに取り入れることが簡単になれば、強い魅力を持ったコンテンツを作ることもまた簡単になりますし、こういったやり方がより広がっていけば良いなと思いました。