ロッティアニメーションとは何ですか？ ロッティについて知っておくべきことすべて

もちろん、AndroidやiOSなどの複雑なアニメーションを作成するのは時間のかかるプロセスです。 それはデザイナーやアニメーターとしても、時には頭の体操のプロセスとしてもあります。

画面サイズごとに大きな画像ファイルをアップロードするか、数千行の脆弱で保守が難しいコードを記述する必要があります。 その結果、アイデアを伝え、魅力的なユーザーエクスペリエンスを生み出すための強力なツールであるにもかかわらず、ほとんどのアプリはビデオアニメーションを使用していません。

そのようにする必要はありません！ これらの問題は長い間解消されており、ワークフローを簡素化するために活用できる便利なファイル形式やプラットフォームなどが多数あります。 そのようなフォーマットの1つがLottieです。

このブログでは、この面白くて便利なフォーマットについて説明します。

ロッティとは？

Lottieが登場する前の数年間、モーションデザイナーはアニメーションを作成し、ソフトウェア開発者に送って実行に移していました。 実装オプションは不十分であり、範囲が制限されていました。

開発者は、アニメーションを低品質の形式でエクスポートしたり、アニメーションデザインをコードで最初から最大限に再現しようとしたりするのが一般的でした。 当然のことながら、これは最も効率的な手法ではなく、多くの場合、非効率的で、モーションデザイナーの意図した出力とは完全に異なるアニメーションになりました。

Hernan Torrisiは、Adobe After Effectsで作成されたアニメーションの表現をエクスポートし、2015年に実行時にアニメーションを生成するという概念を思いつきました。AfterEffectsのスクリプト機能を使用して、アニメーションプロジェクトを繰り返し、AdobeAfterEffectsのプラグインであるBodymovinを使用しました。 JSON形式でアニメーションの説明を作成するために開発されました。

彼は、ブラウザー用のプレーヤーとともに、Javascriptを使用して構築されたフォーマット用の史上初のレンダラーを提供しました。

LottieFilesは、2017年の導入以来、アニメーターと開発者に、アニメーションをWebで迅速にテスト、共有、および表示するためのプラットフォームを提供してきました。 Lottie Animation-based File Format（JSON）を使用すると、設計者はプラットフォーム間で簡単にアニメーションを転送できます。

ロッティは、シルエットアニメーションの世界的パイオニアとして広く認められているドイツの映画監督、シャーロット'ロッテ'ライニガーにちなんで名付けられました。 サポートするプラットフォームに制限はありません。 iOS、Android、およびWebを介してアクセスできます。

Lottieでは、ベクトルコンポーネントとラスターコンポーネントの組み合わせを使用して、クロスプラットフォームの性質を持つ高品質のアニメーションを作成します。 特定のアニメーション要素とパラメーターを対象として、実行時にインタラクティブ機能を追加したり、パラメーターを変更したりする機能を提供します。

これらは、どのデバイスでも使用できる小さなファイルであり、品質を損なうことなくスケーリングできます。 Lottieファイルは、開発者がプロ​​グラミングで再利用できます。

ロッティは何ができますか？

Lottieを使用すると、アニメーションを任意のWebまたはモバイルデバイスで高品質で再生できます。スマートな設定を使用すると、アニメーションをより魅力的にすることができます。

覚えておくべきことの1つは、Lottie用にビルドする場合、モバイルプラットフォーム用にJSONファイルをできるだけ小さくする必要があるということです。 可能な限り、子育てのテクニックを使用してください。

同様のレイヤーで同じキーフレームを複製するときに、追加のコードが追加されます。 可能な限り、パスキーフレームアニメーションを使用する必要があります。

各キーフレームの各頂点のデータを追加すると、スペースの大部分が消費されます。

自動トレースまたはウィグラー手法を使用すると、すべてのフレームにキーフレームが提供されますが、JSONファイルのサイズを非常に大きくすると、パフォーマンスに悪影響を与える可能性があります。 スムーズかつ効率的に機能するには、構成とバランスをとる必要があります。

ロッティはどこで使えますか？

開発者によると、Lottieは、Webデバイスやモバイルデバイスを含む、事実上すべてのプラットフォームからアクセスできます。 つまり、モバイルアプリケーションとWebベースのアプリケーションの両方に簡単に統合できます。

一部のメッセージングサービスでは、Lottieアニメーションをステッカーとして使用することもできます。 技術的限界の観点から、Webまたはモバイルデバイスに制限されていません。 デスクトップアプリケーションや一部のスマートウォッチでは、それを利用できる場合があります。

Web、iOS、Android、Flutter、React、Vue、Angular、Sketchには、さまざまなクロスプラットフォームのプラグインとライブラリが用意されています。 Figma、After Effectsなどは、Lottieアニメーションファイルでサポートされています。

なぜロッティアニメーションを使うのですか？

他にもたくさんのオプションがあるのに、なぜロッティアニメーションを使うべきなのかを考えるのは自然なことです。

理由は次のとおりです。

どこでもプレイできます

Lottie Webプレーヤーは、最新のJavascriptをサポートするすべてのブラウザーと互換性があります。つまり、Lottieは、Javascriptをサポートする最新のブラウザーで再生できます。 さらに、最新のソフトウェア開発キットは動的なWebコンテンツを提供するため、Lottieをデスクトップまたはラップトッププログラムに統合するのが簡単になります。

Lottieの再生をIOS、Android、およびTizenプラットフォームに実装するために利用できるライブラリもあり、スマートフォンやタブレットの大部分のモバイルアプリケーションでLottieを使用できるようになっています。 Lottieアニメーションは、モバイルフロントエンドを強化するために大企業によって迅速に採用されており、スタートアップは製品設計にLottieを使用して、競合他社との差別化を図っています。

メンテナンスが簡単

ロッティのアニメーションはプレーンテキストとして保存されます。つまり、人間が見ることができます。 その結果、アプリケーションインターフェイスの開発にLottieを採用すると、デバッグ時間と展開までの合計時間が短縮されます。 さらに、プレーンテキストのLottieファイルは、専門のソフトウェアツールを使用する必要がないため、保守や微調整が簡単です。

LottieアニメーションのテキストデータはJSONとして構造化されています。つまり、追加の解析や処理を必要とせずに、JSONを受け入れるJavascriptまたはその他のアプリケーション開発環境に同化する準備ができています。 その結果、Lottieは、世界で最も広く使用されているポータブルなアニメーショングラフィック形式になりました。

ダイナミックです

LottieデータのJSON構造により、部分的な値からオブジェクトの大部分に至るまで、さまざまな粒度でコンテンツを簡単に操作および置換できます。 さらに、代替材料は、任意のサイトから動的にロードされる可能性があります。 その結果、Lottieは現在、最もダイナミックで広く使用されているアニメーショングラフィック形式です。

スケーラビリティ

従来のビジュアルはかさばるため、多くの企業はアプリケーションのユーザーインターフェイスでそれらを控えめに使用しています。 グラフィックが多すぎると、特にデータをコンテキストで検索および並べ替える場合に、ストレージと取得のコストが増加する可能性があります。

大きなソリューションで使用する場合、Lottieファイルはストレージとコンテキストの並べ替え/検索の費用を最小限に抑えることができます。 Lottiesは動的であるため、アプリはいつでも更新が必要なコンポーネントをロードするだけで済みます。

最高の品質

ベクトルを使用して幾何学的フォームの寸法を表し、修飾子を使用してそれらの特性とアニメーション中にどのように動き続けるかを定義します。 Lottieプレーヤーは、画面のネイティブ解像度でレンダリングします。 これにより、Lottieアニメーションが常に可能な限り最高の品質で表示されるようになります。

ユーザーがロッティアニメーションにズームインすると、プレーヤーはネイティブ解像度でそれを再描画します。 つまり、Lottieアニメーションは、どんなに拡大されていても、ピクセル化されることはありません。

Cruxで

Lottiesを使用すると、すばやく動的でエレガントなユーザーインターフェイスを実現できます。 アプリケーションのホストされたコンポーネントのストレージニーズが低いため、顧客の帯域幅消費量は大幅に減少します。

ロッティのアニメーションビデオを作るのを楽しみにしているなら、あなたがなりたい最高の場所はwebdewです。

webdewでは、説明ビデオ、キャラクターアニメーション、2Dアニメーション、ホワイトボードアニメーションが、熟練したアニメーターやモーショングラフィックデザイナーによって幅広く作成されています。 詳細については、お問い合わせください。

編集者：アムルサ