3DでのLottieとGif - 新しいアニメーションマテリアル

デザインにアニメーションマテリアルやテクスチャを追加することは、Webに埋め込まれた3Dオブジェクトをより魅力的にする絶好の機会です。Vectaryは、アニメーションマテリアルとしてGifをインポートできるだけでなく、Webのパフォーマンス最適化に最適なフォーマットであるLottieもインポートできる唯一の3Dデザインプラットフォームです。アニメーションテクスチャは、UIのデモや、表面に特殊な効果を追加するのに最適です。

“今回の新リリースにより、Vectaryはプロダクトデザイナー、モーションデザイナー、3Dアーティスト、そして開発者のためのハブとなりつつあります。3Dアセット向けのテクスチャに特化した、Lottieの新たな市場が生まれることを期待しています。” Daniel Nisttahuz（Lottiefiles、プリンシパルプロダクトデザイナー）

“アニメーションを作成するには、何度もクリック操作を行う必要があります。時には、奥行きを感じさせ、引き込まれるような体験を作るために、ほんのわずかな動きだけが必要なこともあります。アニメーションテクスチャの追加は、わずか2クリックでその効果を生み出します。” Andy Klement（Vectary、リサーチ責任者）

この機能はウェブベースであるため、アクセスが非常に簡単で、あらゆるワークフロー（Figma、Miro、Pitch、Framer）にスムーズに連携できます。Vectaryがもたらすデザインの可能性と柔軟な操作性は、ユーザーエクスペリエンスやコンテンツ作成に注力するデザイナーにとって大きなメリットとなります。

「ウェブベースならではの柔軟性があるため、LottieとVectaryを頻繁に利用しています。この2つを組み合わせることで、クライアントに提供できるサービスの幅が広がりました。」 Apostolos Roussas（CandyMustache、ディレクター / モーションアーティスト）

Vectaryにアニメーションを取り込む方法

Vectaryにアニメーションを取り込むには、いくつかの方法があります：

1. アニメーション化されたLottieファイルや.gifをテクスチャとして配置します。オブジェクトを選択し、 Animation を、 Color 設定で選択します。ファイルをインポートするか、オンラインファイルへのリンクを使用します。Vectaryが自動的に読み込みます。アニメーションを表示するには、 Previewで確認できます。 モードに移動してください。アニメーションを削除するには、以下を選択します： Solid.

2. アニメーションは、さまざまな Material Properties に読み込むことで、魅力的な表現を実現できます。 

- 発光させるには、以下にインポートします： Emission さらに輝きを加えるには、 環境 設定でBloomを追加します。 

-  アニメーションを Normal map設定 として読み込むと、凹凸のみを変更できます。

3. アニメーションをシーン上の個別のオブジェクトとしてインポートします。 ファイルをシーン上にドラッグ＆ドロップするか、リンクをコピー＆ペーストします。 Lottieファイルや.gifは個別のオブジェクトとして動作します。シーン上で移動するには、 Gizmo を使用します。 

シーンをリンクとして共有するか、ウェブサイトに埋め込んで、美しい効果を演出しましょう。

「ウェブサイトに3Dアニメーションを簡単に導入できるようになりました。この機能は、まったく新しい可能性を広げてくれます。」 Joseph Berry（フリーランス エクスペリエンスデザイナー）