Riveは新機能レイアウトを開始しました。これにより、アニメーション化されたグラフィックスの画面適応が完全に変更されました！退屈な適応作業に別れを告げると、デザイナーと開発者は、さまざまな画面サイズやデバイスに自動的に適応できる動的で応答性の高いアニメーションを簡単に作成でき、常にRiveのユニークなインタラクティブ性と流encyさを維持できます。レイアウト機能は、各プラットフォームに個別のバージョンを作成することなく、異なるプラットフォームでアニメーションを完全に表示できる「ユニバーサルレイアウトアーティファクト」のようなものです。深いネスティングと柔軟なレイアウトをサポートし、Riveの制約システムと組み合わせて、より洗練された安定したアニメーション効果を実現できます。
デザイナーと開発者は、最近、レイアウトと呼ばれる新しい機能をリリースしたことを最終的にリリースすることができます。シグネチャーインタラクティブとスムーズなアニメーション効果。
まさにレイアウトとは何ですか？それは「ユニバーサルレイアウトアーティファクト」のようなものです。これは、さまざまな画面サイズに自動的に適応できます。
レイアウトを使用すると、デザイナーは、携帯電話とコンピューターの両方に完全に表示されるボタン、リスト、またはメニューなど、画面サイズに自動的に適応するレイアウトを簡単に作成できます。 デザイナーは、レイアウトルールに従ってどの要素に従うか、どの要素を独立して表示できるかを自由に選択できます。
さらに、レイアウト要素にアニメーションを追加して、インターフェイスをより鮮明で柔軟にすることもできます。 たとえば、すべてのデバイスに合わせて位置、サイズ、内側のマージン、および外側のマージンに応じて自動的にサイズを変更するグラフィックを設計できます。 レイアウトを使用する場合、アニメーション効果を失うことなく、画面のサイズに従ってグラフィックをスケーリングおよび再編成できます。
レイアウトのハイライトは、クロスデバイスの互換性です。 グラフィックにより、車のダッシュボードとスマートフォン間のスムーズな移行が可能になり、一貫した視覚効果が維持されます。 デザイナーはグラフィックを1回だけ作成する必要があり、各プラットフォームに個別のバージョンを作成せずに各プラットフォームで自動的に調整します。
また、レイアウトは多言語をサポートし、言語の長さに応じてレイアウトサイズを自動的に調整できます。 たとえば、テキストが長い場合、レイアウトは、異なる言語の表示要件に合わせてテキストボックスを再配置またはサイズ変更できます。 これにより、すべての言語が一貫して表示されることが保証され、開発者は異なる言語によって引き起こされるレイアウトの問題を心配する必要はありません。
複雑なレイアウトを作成する必要があるデザイナー向けに、レイアウトは深いネスティングと柔軟なレイアウトのオプションを提供します。 設計者は、アラインメント、ラインブレーク、間隔オプションを使用して、マルチレベルのUI要素などの複雑なUIレイアウト、またはさまざまな画面で調整する必要がある複雑な構造を作成できます。
また、レイアウトはブレークポイントをサポートします。ブレークポイントは、コンポーネントの幅、高さ、または割合の変化に基づいてRiveの状態マシンをトリガーし、さまざまなアニメーションまたはレイアウトの変更を実行できます。 たとえば、画面がランドスケープからポートレートに切り替わると、レイアウトは自動的に別のレイアウトまたはアニメーション状態に切り替えることができます。
他の設計ツールとは異なり、Riveレイアウトにより、デザイナーはオブジェクトがレイアウトエンジンに参加するかどうかを自由に選択でき、いつでもレイアウトルールを破り、自由に設計できるようになります。 これは、デザイナーが高度にアニメーション化されたキャラクターなどの自由な要素をより構造化されたレイアウトに埋め込み、柔軟な設計効果を実現できることを意味します。 レイアウト調整を行う場合でも、キャラクターのアニメーションはスムーズなままであり、レイアウトエンジンによって制限されません。
さらに、レイアウトは、Riveの制約システムとの統合もサポートし、設計における従来の階層的な関係を可能にします。 UIレイアウトが変更されたとしても、アニメーションは元の位置と形状を正確かつ制御できるようにすることができ、視覚効果の安定性を確保できます。 たとえば、ページレイアウトが変更されると、制約システムはレイアウト障害を避けるために、関連する要素を自動的に調整します。
レイアウトのコンポーネントは、Riveの状態マシンを介して制御でき、コンポーネントの幅、高さ、または割合に基づいてさまざまな状態の変更をトリガーできます。 これにより、デザイナーは、デバイス画面に応じて、さまざまなアニメーションシーケンスやレスポンシブ効果のトリガーなど、インタラクティブなアニメーションをレイアウトに追加できます。 RiveのState Machineは、レイアウト調整時にアニメーションのあらゆる詳細を制御することもでき、デザイナーは複数のレスポンシブでインタラクティブなアニメーションを1つのデザインで組み合わせて、ユーザーに豊かな視覚体験を提供できます。
詳細：https：//rive.app/blog/introducing-layouts
要するに、Riveレイアウトの出現により、アニメーションデザインに革新的な変更がもたらされ、画面適応プロセスが簡素化され、デザイナーと開発者が前例のない自由と創造的な空間を提供し、アニメーションデザインがより効率的で、より便利で、より有益なものになりました。 急いでRiveレイアウトを体験し、絵画デザインの新しい章を始めましょう！