bodymovinばかり使ってます

僕の普段の仕事のほとんどはWebサイト制作です。

そんなサイト制作でよく使うのがbodymovinです。 github.com

2017年から、bodymovin(今はlottie?)を知って以降、7割くらいのサイトで使ってる気がします。

bodymovin(Lottie)は、AfterEffectsで作ったシェイプアニメーションをSVGアニメーションとしてjsonで書き出してくれるツール。

例えば、とりあえず制作途中の自分のサイト JUUUNNNKでは、ロゴアニメーションでbodymovinを使ってます。 f:id:junkino:20180526223436g:plain こんなの

bodymovinは実装する人にあんまり負担をかけず、アニメーションをポンと入れれるのでめちゃ便利です。

最近だとWebGLのすんげーカッコいいエフェクトばっかりのサイトとかあって羨ましいのですが、

そういったWebGLゴリゴリのサイトは、業界のWebデザイン合戦に持ち込まれたレーザー砲と思ってます。

bodymovinはそれに対して、手軽な手榴弾くらいだと思います。

シェイプアニメーションで作れば、Chromeではだいたい綺麗になりますが、バグりやすい条件などがいくつかあります。

よく言われてるのが、パスの結合で、 最近だと、主にIE系ではトラックマットの重ねすぎでも表示が崩れやすいことに気づきました。 上手いこと言ったら、会社のブログとかに実案件のロゴ内容とかと合わせてまとめようと思います。


下記の記事で知りました。ありがとうございます。