Lottiefilesでアニメーションを表示する
はじめに
この記事では、Webサイトやアプリケーションで使用できる軽量なアニメーションを作成できるLottiefilesについて解説します。
Lottiefilesとは
Lottiefilesは、Adobe After EffectsやFigmaで作成したアニメーションをJSON形式に変換し、Webサイトやアプリケーションで簡単に実装できるツールです。従来のGIFやビデオ形式と比べてファイルサイズが小さく、高品質なアニメーションを実現できます。
LPにも説明がありますが、世界中で使用されています。
Lottieの強み
Lottieには以下のような強みがあります。
1. 軽量なファイルサイズ
- JSONベースのため、従来のGIFやMP4と比べて非常に軽量
- ページの読み込み時間を短縮できる
- 帯域幅の使用を抑えられる
2. 高品質な表示
- SVGベースのため、どのような画面サイズでも鮮明に表示
- 拡大縮小しても品質が劣化しない
- Retinaディスプレイにも対応
3. カスタマイズ性
- JavaScriptで動的に制御可能
- 再生速度、色、サイズなどを柔軟に変更できる
- インタラクティブなアニメーションの実装が容易
4. クロスプラットフォーム対応
- Web、iOS、Android、Windows、Macなど、様々なプラットフォームで使用可能
- 一度作成したアニメーションを複数のプラットフォームで再利用できる
5. 開発効率の向上
- デザイナーとエンジニア間のスムーズな連携が可能
- アニメーションの修正や更新が容易
- 実装コストの削減につながる
アニメーションをダウンロードする
自分で作成したアニメーションの他に、他の人が作成したアニメーションをダウンロードして使用することもできます。
また、ダウンロードしたアニメーションをカスタマイズして使用することも可能です。
ダウンロードする際には下記の拡張子でダウンロードできます。
・.json
・.lottie（軽量かつおすすめ）
・.mp4
・.webm
・.svg
・.gif
ライセンスは下記ページから確認してください。
ダウンロードしたlottieファイルを使用する
ダウンロードしたlottieファイルを使用するには、下記のように記述します。
この記事ではremix(react)で使用する方法を紹介します。
vueやsvelte、iosやandroidでも同じように使用できます。
1. lottieのパッケージをインストール
下記ページを参考にlottieのパッケージをインストールします。
その後、DotLottieReactコンポーネントを配置することでアニメーションを表示できます。
npm install @lottiefiles/dotlottie-react
2. アニメーションをダウンロードする
ここでは下記のアニメーションをダウンロードして表示してみます。
他にもいろいろあるので、ぜひ見てみてください。
3. ファイルを作成する
DotLottieReactコンポーネントを配置することでアニメーションを表示できます。
import type { MetaFunction } from "@remix-run/node";
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
<div className="flex h-screen items-center justify-center">
<div className="flex flex-col items-center gap-16">
<div><DotLottieReact
src="/assets/demo.lottie"
loop
autoplay
/></div>
</div>
</div>
);
}
4. アニメーションの表示確認
こんな感じでアニメーションが表示されることが確認できます。
おわりに
webサイトに動きのある要素を配置したい場合にはLottieを使用することで軽量なアニメーションを配置できます。
ローディングコンポーネントや背景のアニメーションをcssで作るコストが削減でき、またcssだけでは実現できないリッチなアニメーションを作成できる点が嬉しいです。
個人利用目的などであれば無料ダウンロードできる素材を選んで使用してみるとリッチなサイトになるかと思います。
figmaを使用する場合、下記のプラグインを使用することでオリジナルのアニメーションを作成できます。
また、アニメーションでもDOMの要素を操作したい場合はcssで頑張るか、gsapなどのライブラリを使用するといいかと思います。
Discussion