Lottieでグラデーションを使ってアニメーションを作る裏技2つ

みなさんこんにちは。しゅん（@shun_webdesign）です。

皆さんはLottieをご存知でしょうか？なめらかなアニメーションをサイトに実装でき、手軽にリッチな表現を取り入れることができます。

LottieはAftrer Effectsで作る方法があるのですが、グラデーションが作成できません。

しかし、グラデーションを適応させる方法を見つけたので、今回はLottieで画像やグラデーションを作る方法を紹介します。

グラデーションが使えれば、表現の幅が広がるので試してみてください。

Lottieはグラデーションを使うことができる

Lottieは、ベクターベースのアニメーションを作成および再生するためのライブラリであり、Adobe After EffectsやSketchなどのデザインツールで作成されたJSON形式のファイルを読み込むことができます。

グラデーションは、多色の線形または放射状の色の組み合わせで構成された塗りつぶしのパターンです。Lottieは、グラデーションをサポートしていますが、いくつかの制限があります。

編集方法

以下は、Lottieでグラデーションを使う手順を紹介します。

After EffectsやSketchなどのデザインツールで、グラデーションを含むアニメーションを作成します。

この方法は一番手軽にグラデーションを扱える方法です。

AfterEffects上にグラデーションを配置したとき上記のような構成でレイヤーが表示されます。

「シェイプレイヤー」▶「コンテンツ」▶「長方形」▶「グラデーションの塗り1」

「グラデーションの塗り1」を半角英文字に編集します。今回は「gradient」とさせていただきました。

レイヤー名を変更した後、上書き保存（Command+S）を行い書き出すことでグラデーションが扱えます。

実際に作成しアップロードしたlottieのグラデーション。

JSONファイルの書き出し

アニメーションが完成したら、JSON形式のファイルを書き出します。After Effectsを使用している場合は、bodymovinのプラグインを使用して、JSONファイルを書き出すことができます。Sketchを使用している場合は、プラグインを使用して、JSONファイルを書き出すことができます。

JSONファイルの確認

書き出しが完了したJSONをlottie上にアップロードしても、グレースケールで表示されてしまうので注意してください。

After Effectsからbodymovinで書き出しするとグラデーションがモノクロに出力されます。

書き出されたJSONファイルを開き『[0,1,1,1~…]』で始まる箇所を探して書き換えます。

この数字はモノクロに変換されたグラデーションの数値です。

目視で探すのは大変なのでお使いのPCから⌘ + F,Control + F を入力して文字列を探しましょう。

コード編集方法

[0,1,1,1,1,1,1,1]　→　 [0（開始位置変更しない）,1（R）,1（G）,1（B）,1（終了位置変更しない）,1（R）,1**（G）,1（B）]

現在のカラーコードの値に対して255で割ります。

例1：R: 255, G: 135, B: 185 ⇛ 1,0.529,0.725

例2：1色 R:255, G: 0, B:0 2色 R:0, G: 255, B: 255 ⇛　[0,1,0,0,1,0,1,1]

JSONファイルが作成されたら、Lottieライブラリを使用してアニメーションを読み込みます。

Lottieライブラリは、Webアプリケーションやモバイルアプリケーションなど、さまざまなプラットフォームで使用することができます。

今回は以下について紹介しました。

グラデーションの作成方法:

デザインツールでのアニメーション作成: After EffectsやSketchでグラデーションを含むアニメーションを作成。
JSONファイルの書き出し: bodymovinプラグインを使用してJSONファイルを書き出す。
JSONファイルの編集: 書き出されたJSONファイルを開き、グラデーションがグレースケールで表示されるため、RGBの値を255で割った数値に手動で編集。
Lottieアニメーションの読み込み: 編集後のJSONファイルをLottieライブラリを使用して読み込む。

最後まで見ていただきありがとうございます！是非記事の共有をよろしくお願いします。