この記事はピクシブ株式会社 Advent Calendar 2017の19日目です。 こんにちは、17新卒エンジニアのまつらいです。普段は主にpixivFANBOXというサービスでJavaScriptやPHPを書いています。今日は、ウェブブラウザ上で動く軽量で扱いやすいアニメーションを実現させることができる、僕の大好きな「Lottie / Bodymovin」について作例を含めて紹介します。 https://matsurai25.info/bodymovin/blue/ たとえば、デザイナー(※1)に貰ったAIファイルをそのままAfterEffectsで加工、レイヤー毎に動きをつけてみました。このページはiOS safariやIE11でも動作します。LPなどの目立つ部分でLottieを使うと、サービスがグッと印象的になるはずです。 なお、この例ではサイズの大きな画像が使っているので、端末の
![Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 - pixiv inside](https://cdn-ak-scissors.b.st-hatena.com/image/square/0be5d995fd4c41531d6d5d55c0f17e0fc5a719b1/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fp%2Fpxv%2F20191224%2F20191224221621.png)