デザイナー、開発者の皆様、ついに「画面サイズ対応」の恐怖から解放されます！Riveは最近、Layoutsという新しい機能を発表しました。これにより、ユーザーは動的でレスポンシブなアニメーショングラフィックを作成できるようになり、これらのグラフィックは様々なデバイスや画面サイズに自動的に適応し、Rive特有のインタラクティブ性と滑らかなアニメーション効果を維持します。

image.png

Layoutsとは一体何でしょうか？簡単に言うと、「万能レイアウトツール」です。アニメーションを様々な画面サイズに自動的に適応させることができ、Riveならではの滑らかな動きを維持できます！

Layoutsを使用すると、デザイナーはボタン、リスト、メニューなど、画面サイズに自動的に適応するレイアウトを簡単に作成できます。スマートフォンでもパソコンでも完璧に表示されます。デザイナーは、どの要素をレイアウトルールに従わせるのか、どの要素を独立して表示するのかを自由に選択できます。

さらに、レイアウト要素にアニメーションを追加して、インターフェースをより生き生きと動的にすることができます。例えば、位置、サイズ、内側マージン、外側マージンに応じてサイズが自動調整されるグラフィックを設計し、すべてのデバイスに適応させることができます。Layoutsを使用すると、グラフィックは画面サイズに合わせて伸縮したり、再配置されたりしますが、アニメーション効果は失われません。

Layoutsの大きな特徴は、デバイス間の互換性です。グラフィックは車のダッシュボードとスマートフォン間でスムーズに遷移し、一貫した視覚効果を維持します。デザイナーは一度だけグラフィックを作成すれば、各プラットフォームで自動的に調整され、各プラットフォームごとに個別にバージョンを作成する必要はありません。

Layoutsは多言語にも対応しており、言語の長さに合わせてレイアウトサイズを自動調整できます。例えば、テキストの長さが長い場合、Layoutsはテキストボックスのサイズを再配置または調整して、様々な言語の表示要件に対応します。これにより、すべての言語で表示効果が統一され、開発者は異なる言語によって発生する可能性のあるレイアウトの問題を心配する必要がありません。

複雑なレイアウトを作成する必要があるデザイナーにとって、Layoutsは深いネストと柔軟なレイアウトのオプションを提供します。デザイナーは、整列、改行、間隔のオプションを使用して、多層のUI要素、または異なる画面で調整が必要な複雑な構造など、複雑なUIレイアウトを作成できます。

Layoutsはブレークポイント（Breakpoints）機能もサポートしており、コンポーネントの幅、高さ、または比率の変化に基づいてRiveの状態マシンをトリガーし、異なるアニメーションやレイアウトの変更を実行できます。例えば、画面が横向きから縦向きに切り替わると、Layoutsは自動的に別のレイアウトまたはアニメーション状態に切り替わります。

他のデザインツールとは異なり、Rive Layoutsでは、デザイナーはオブジェクトがレイアウトエンジンに参加するかどうかを自由に選択でき、レイアウトルールをいつでも破って自由にデザインできます。つまり、デザイナーは高度にアニメーション化されたキャラクターなどの自由な要素を、より構造化されたレイアウトに自由に埋め込み、柔軟なデザイン効果を実現できます。レイアウト調整中も、キャラクターのアニメーションはスムーズに維持され、レイアウトエンジンによって制限されることはありません。

さらに、LayoutsはRiveの制約（Constraints）システムとの連携もサポートしており、従来の階層関係から解放されたデザインを可能にします。UIレイアウトが変わっても、アニメーションは正確かつ制御可能に元の位置と形状を維持し、視覚効果の安定性を確保します。例えば、ページレイアウトが変更された場合、制約システムは関連要素を自動的に調整して、レイアウトの混乱を防ぎます。

Layoutsのコンポーネントは、Riveの状態マシンで制御でき、コンポーネントの幅、高さ、または比率に基づいて異なる状態の変化をトリガーできます。これにより、デザイナーはレイアウトにインタラクティブなアニメーションを追加できます。例えば、デバイスの画面の違いに応じて、異なるアニメーションシーケンスやレスポンス効果をトリガーできます。Riveの状態マシンでは、レイアウト調整時にアニメーションの細部を制御することもでき、デザイナーは1つのデザインに様々なレスポンシブなインタラクティブアニメーションを組み合わせ、ユーザーにより豊かな視覚体験を提供できます。

詳細：https://rive.app/blog/introducing-layouts