この記事はMarko Dogramadziと共同執筆されました。
Web デザインのトレンドは絶えず変化しています。最もエキサイティングな新しい展開の 1 つは、モーション グラフィックスとアニメーションによるインタラクティブ性の高まりです。
Enter リーブは、モーション デザインとインタラクティブ性のギャップを埋める強力なアニメーション プラットフォームです。デザイナーは、Web、モバイル、ゲームで使用するためのグラフィックを迅速に作成し、すぐに制作できるようになります。
Riveがこれほど有望なのは、その革新的な 状態機械歩いたり、ジョギングしたり、走ったりできるアニメーション キャラクターを想像してください。各アニメーション シーケンスは個別の状態になります。現在の状態を Rive ランタイム エンジンに渡すと、そのステート マシンがあらゆる遷移をシームレスに処理し、エンド ユーザーにスムーズで魅力的なエクスペリエンスを提供します。インタラクティブ性の画期的な革命です。
最も精巧なデザインやアニメーションでも軽量で、多くの場合 30 KB 未満です。重い GIF やビデオ ファイルはもう必要ありません。Rive を使用すると、アニメーションはすばやく読み込まれ、全体的なパフォーマンスが向上します。
Riveは、モーションデザインの経験がある人にとっては直感的に使用できます。アニメーションの世界を探求したい完全な初心者には、 Rive 入門 このページは出発点として最適です。
ご存知のとおり、私たちはRiveの大ファンです。そこで、Riveを Mendix ローコード方式で？
募集中！ 実際、私たちは 新しいウィジェット 次回のRivesの使用について Mendix プロジェクト。魅力的なサインアップ ページを作成する場合でも、製造工場の生産ラインを視覚化する場合でも、このウィジェットを使用すると、すぐに使用できるグラフィックスのパワーを活用できます。
ライブステートマシン
設定するには Mendix Rive コントローラー ウィジェットを使用する場合、Rive ウィジェットがどのように制御されるかを理解することが重要です。
Rive アニメーションは .riv ファイル内にカプセル化され、1 つ以上のステート マシンを含めることができます。ステート マシンは、さまざまな状態間のシームレスな遷移を可能にするアニメーションのコレクションであり、これを使用して滑らかで応答性の高い UI 要素を作成できます。
ステートマシンにはいくつかの 入力、次の 3 つのタイプのいずれかになります。
- ブール入力: オンとオフを切り替えることができるスイッチとして機能します。特定の時点で true に設定できるのは、ステート マシンごとに 1 つのブール入力のみです。
- トリガー入力: ブール値に似ていますが、短時間のみ true になります。特定のアニメーション シーケンスをトリガーし、定義済みの状態に戻す場合に便利です。
- 数字入力: キャラクターの走行速度を決定したり、レビューに残された星の数を追跡したりするなど、アニメーションの表示を管理するための整数パラメータを受け入れます。
これらの入力を制御することで、Rive ファイルで定義されているすべてのアニメーションとトランジションを実行できます。
Riveアニメーションの素晴らしいアイデアが浮かんだとします。それをどのように組み込むのでしょうか？ Mendix アプリ？
最初のRiveを作成する
インタラクティブなログイン ページを作成します。このページでは、クマの監視下でユーザーがログイン資格情報を入力できます。
[私たちのクマの製作についてもっと知りたい方は、Riveのチームがまとめた 詳細なブログ その創造について説明します。
- まず、Rive を作成し、.riv ファイルとしてエクスポートする必要があります。
RiveコミュニティのBearを使用します。 フアン・カルロス作、ダウンロードできます こちら.
- ダウンロードしてインポートする Rive アニメーション コントローラー モジュール Mendix マーケットプレイスをプロジェクトに組み込みます。
.riv ファイルの保存
Rive コントローラー モジュールには、アプリケーションに表示される .riv ファイルを管理するための概要ページがあります。これにより、任意の数の .riv ファイルをアプリケーション自体内にホストし、ページに読み込まれたときに Rive Canvas ウィジェットにオンデマンドで提供することができます。
Rive ファイルを追加するときは、「Rive 名」プロパティを指定する必要があります。この名前は、ウィジェットを正しい Rive にポイントするために、Rive コントローラー ウィジェット パラメーター (Rive 名) 内で使用されます。
- RiveFile_Overviewをナビゲーションに追加して、管理者がアクセスできるようにします。ここで.rivファイルをホストします。
- アプリを実行し、RiveFile_Overview ページにアクセスします。
- 一意の「Rive 名」を指定して .riv ファイルをアップロードします。この例では、単に「bear」という名前を付けます。
ステートマシンの検査
Rive ファイルをアプリケーションに統合する前に、まずそれがサポートするすべてのインタラクションを理解する必要があります。
Visual Studio Codeは便利な拡張機能を提供しています。 vscode-rive-viewer、これにより開発者は .riv ファイルをエディター内で直接開くことができます。このツールは、利用可能なステート マシンとそれに対応する入力を明確に表示します。
Our Bear は 5 つの入力をサポートしています:
2 つのブール入力 (成功と失敗)
2つのトリガー入力（チェックとハンズアップ）
1 数字入力（見る）
インタラクティブなログインページを作成する
- ユーザー名とパスワードの 2 つの入力フィールドを持つ新しいページ「ログイン」を作成します。
RiveState エンティティを使用した Rive アニメーションの管理
Rive Animation Controller モジュールには、Rive アニメーションの現在の状態を管理するために設計された、多目的の非永続エンティティ (NPE) RiveState が備わっています。このエンティティには、アニメーションの操作に必要なすべての標準属性が含まれています。ただし、数値に基づいてアニメーションの動作に影響を与える数値入力を扱う場合は、追加の手順が必要です。
特殊なエンティティを作成して RiveState を拡張することをお勧めします。この特殊なエンティティは共通属性を継承し、カスタムの数値入力を追加できるようになります。
- RiveState を一般化した新しいエンティティ「Bear」を作成します。数値入力を整数属性「LookValue」として追加します。
- Bear オブジェクトを返し、Rive アニメーションのデータ ソースとして機能するデータ ビューをページに追加します。
- このデータビュー内にRiveControllerウィジェットを追加します
- Bears ステート マシン モデル (手順 5 から) に従って、Rive コントローラー プロパティを構成します。
ウィジェットパラメータ
Rive コントローラー ウィジェットでは、設定可能なウィジェット プロパティを通じて、すべての可能な Rive アニメーション ファイルを表示できるようにする必要があります。次のパラメーターをウィジェットへの入力として設定する必要があります。
-
- Rive 名: Rive ファイルの名前 (RiveFile エンティティで設定されているもの)
- ステートマシン名: Rive ファイルのステートマシン名
- ブール入力名: Riveのすべての「ブール」ステートマシン入力の名前
- アクティブ入力 (ブール): アクティブなブール状態マシン入力の名前 (属性値を変更することで更新できます)
- トリガー入力名: Riveのすべての「トリガー」ステートマシン入力の名前
- アクティブ入力（トリガー）：アクティブトリガー入力名（属性値を変更することで設定可能）
- 数値入力名: Rive のすべての「数値」ステートマシン入力の名前。各数値入力の値を提供する整数属性を持つ。
プロジェクトを実行して成功しました! 私たちのクマがログインフォームを見守っています。
次に、クマがユーザーの入力に反応するようにインタラクティブ性を追加します。
アニメーションの制御
「アクティブ」ブール値およびトリガー ステート マシン入力属性を使用すると、属性の値を入力の名前に更新することでアニメーションを更新するように構成できます。これはナノフローで行うのが最適です。
ブール入力の場合、「アクティブ入力 (ブール)」属性の値を、アクティブにするブール入力の名前に設定します。残りは非アクティブに設定されます。
トリガー入力の場合、「アクティブ入力 (トリガー)」属性の値を、起動するトリガー入力の名前に設定します。トリガーが起動されると、ウィジェットは自動的に属性値を空の文字列に設定します。
数値入力の場合、特定の数値入力に対応する数値属性はいつでも更新できます。アニメーションは新しい値を反映して更新されます。
これは、マイクロフロー/ナノフローが特定のアニメーションを発生させ、Riveがゲームに完全に統合されることを保証することを意味します。 Mendix アプリケーション。
- クマにインタラクティブ性を追加します。
各インタラクションに対して、ユーザーのアクションに応じて状態を変更する Nanoflow を作成します。
インタラクションモデル
| 相互作用 | 入力タイプ | ロジック |
| ユーザー名入力時に | ブーリアン | ブール入力「ActiveStateNameBoolean」を「Check」に変更します。
クマは下を向きます。 |
| ユーザー名入力の変更時 | 数 | 数値入力「LookValue」をユーザー名の文字数に変更します。
ユーザーが入力すると、クマの目が左から右に移動します。 |
| パスワード入力時に | ブーリアン | ブール入力「ActiveStateNameBoolean」を「hands_up」に変更します。
熊は前足で目を覆います。 |
| ログインをクリック | トリガー | ログインが成功したら、トリガー入力「ActiveStateNameTrigger」を「成功」に変更して、クマを笑顔にします。
ログインに失敗した場合は、トリガー入力「ActiveStateNameTrigger」を「失敗」に変更して、クマを驚かせます。 |
プロジェクト内の残りのインタラクションの構築を続けます。
アプリを実行すると、完全にインタラクティブな Bear ログイン画面が表示されます。
インタラクティブな動作例
完成したインタラクティブログイン画面は、 デモアプリケーションはこちら.
以下の資格情報を使用するだけです:
ユーザー名：
パスワード: リバーパスワード
その Rive アニメーション コントローラー モジュール 始めるのに役立つ、ここで説明したすべての例が含まれています。
Rive Animation Controllerをダウンロードして、次の作品にモーションデザインを加えてみましょう。 Mendix アプリ！