新しいdotLottieウェブプレーヤーのご紹介

2024年4月9日 16:12

新しいオープンソースのdotLottieウェブプレーヤー@lottiefiles/dotlottie-webを発表できることを嬉しく思います。この新しいプレイヤーはThorVGレンダリングエンジンをベースにしています。

この記事では、このプレーヤーがユーザーにもたらす大きな利点を探り、コミュニティファーストのアプローチでこのプレーヤーを開発する私たちのコミットメントを共有します。

新しいレンダラー - ThorVG

ThorVGは、Lottieアニメーションに対応する新たな強力なレンダリングエンジンとして、あなたのdotLottie (.lottie) アニメーションに役立つでしょう。ThorVGは、クロスプラットフォームで高性能なベクターグラフィックスライブラリで、現在Lottieアニメーションをサポートしています。

ThorVGのクロスプラットフォームの性質は、すべての閲覧プラットフォームで一貫したアニメーション品質を保証し、アニメーションがどこで閲覧されても同じように見えることを保証します。モバイルで見ても、お気に入りのフレームワークで見ても、アニメーションは一貫した外観を維持します。さまざまなプラットフォームで新しいプレーヤーがリリースされても、アニメーションの品質やビジュアル面を損なうことなく、シームレスに動作します。

ThorVGの詳細については、ブログ記事をご覧いただくか、GitHubページをご覧ください。

dotLottie Webを始める

dotLottie-webはシームレスな開発体験を提供するように設計されています。あなたのウェブプロジェクトに統合するための簡単なガイドは以下の通りです：

インストール

CDNを使う：npmを使わずに素早くセットアップするには、CDNを使ってHTMLにdotLottie Webを直接インクルードします：

<script type="module">
	import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";
</script>

基本的な使い方

dotLottieプレーヤーがアニメーションを描画するためのcanvas要素をHTMLに埋め込みます：

<canvas id="dotLottie-canvas"></canvas>

次に、dotLottieプレーヤーを初期化して、ロードとアニメーションを行います：

<script type="module">
	import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";

	const canvas = document.querySelector("#dotLottie-canvas");
	const src = "https://lottie.host/5f22bb62-ad59-43c4-a320-57246ce3278f/lcxMV9CYuN.lottie";

	const dotLottie = new DotLottie({
	  canvas,
	  src,
	  loop: true,
	  autoplay: true
	});
</script>copy

Codepenで実装の全容をご覧ください：

使用例

それでは、dotLottie Webの様々なシナリオや使い方を示す、より多くの例を探ってみましょう。

アニメーション再生のコントロール

dotLottie WebプレーヤーのAPIは、アニメーションの広範なコントロールを可能にします：

基本操作：アニメーションの再生、一時停止、停止。以下のコードスニペットは、dotLottieの再生、一時停止、停止メソッドをボタンにバインドする方法を示しており、アニメーションの直感的なコントロールを可能にします。

const playBtn = document.querySelector("#play-btn");
const pauseBtn = document.querySelector("#pause-btn");
const stopBtn = document.querySelector("#stop-btn");

playBtn.addEventListener("click", () => dotLottie.play());
pauseBtn.addEventListener("click", () => dotLottie.pause());
stopBtn.addEventListener("click", () => dotLottie.stop());copy

シーク：dotLottieインスタンスのsetFrameメソッドを使用して、特定のアニメーションフレームにナビゲートします。この方法は、現在の状態（再生中、一時停止中、停止中）に関係なく、指定されたフレームでアニメーションをレンダリングします。

const someFrameNumber = 12;

dotLottie.setFrame(someFrameNumber);copy

スピードコントロール： 再生速度の調整をします。これはsetSpeedメソッドによって実現され、下図のように速度倍率を数値として受け取ります：

const slowSpeed = 0.5; // Half the normal speed
dotLottie.setSpeed(slowSpeed);copy

ループの切り替え： アニメーションのループを有効または無効にします。この機能は setLoop メソッドによって管理され、プレーヤのループ動作を変更します。

dotLottie.setLoop(false); // Disable loopingcopy

イベントリスニング： 再生、一時停止、停止、フレームなどのイベントに反応します。この例のように、addEventListenerメソッドを使ってこれらのイベントをリスニングすることができます：

dotLottie.addEventListener("play", () => {
	console.log("Animation has started playing.");
});
dotLottie.addEventListener("pause", () => {
	console.log("Animation has paused.");
});
dotLottie.addEventListener("stop", () => {
	console.log("Animation has stopped.");
});
dotLottie.addEventListener("frame", ({currentFrame}) => {
	console.log(`About to render frame ${currentFrame}, take action here!`);
});copy

dotLottie WebのAPIを使って、アニメーションの再生を操作する方法を紹介します。再生、一時停止、停止、特定のフレームへの移動、再生速度の調整、ループの切り替え、アニメーションイベントへの応答など、基本的なコントロールの実装方法を学びます。Codepenのサンプルで、これらの機能を実際に使ってみましょう：

提供されるAPIとイベントの包括的な詳細については、GitHubのdotLottie Webをご覧ください。

アニメーションの動的ロード

dotLottie Webプレーヤのloadメソッドは、ダイナミックなアニメーションのロードを可能にし、ユーザーのアクションや実行時の状況に応じてアニメーションを切り替えるのに最適です。初期設定と同じ設定オブジェクトを使用します。

loadメソッドの使用例：

const dotLottie = new DotLottie({ canvas });
const loadBtn = document.querySelector("#my-load-btn");

loadBtn.addEventListener("click", () => {
    dotLottie.load({
        src: "https://URL_to_new_animation.lottie",
        autoplay: true,
        loop: true
    });
});copy

実用的なデモンストレーションとして、オンデマンドのlottieとdotLottieのアニメーションのロードを紹介する次のCodepenの例をご覧ください：

今後のプラン

dotLottieプレーヤーの継続的な改良と強化に対する私たちのコミットメントは揺るぎません。今後のアップデートでは、テーマ設定やステートマシンなど、より高度な機能の導入を目指しています。GitHubリポジトリをフォローして、最新の開発状況を把握してください。

結論

ThorVGを搭載した新しいdotLottieウェブプレーヤーは、様々なプラットフォームで高品質で一貫したレンダリングを保証します。

dotLottieのウェブプレーヤーは、複数のJavaScriptフレームワークとシームレスに統合されており、React、Vue、およびWebコンポーネント用のラッパーを提供しています。ぜひチェックしてみてください。

GitHubのdotLottieウェブプレーヤーをチェックするのをお忘れなく。また、便利だと感じたら星をつけてください！

https://note.com/lottiefiles_jp

引用元：https://lottiefiles.com/blog/working-with-lottie-animations/new-dotlottie-web-player