Skip to main content

States Node

Noodlでは、異なる視覚状態の使用が一般的なコンセプトです。このガイドでは、シンプルな再利用可能なスイッチコンポーネントの作成例と、ホバリング効果の例を用いて、状態について説明します。

例では、遷移とインタラクションを扱うためのStatesノードの使用方法を説明します。

ビジュアル​

まず、スイッチを構成する基本的なビジュアルノードから始めましょう。これは、適切なスタイリングを施したGroupとCircleで構成されます。以下のノードをコピーして、自分のプロジェクトに貼り付けてください。

以下に、2つのノードのスタイリングを示します。最初の画像はCircleノードのプロパティを、2番目の画像はGroupノードのプロパティを示しています。プレビューでの配置を確認するために、グラフ内のノードにカーソルを合わせることを忘れないでください。

Statesノード​

視覚的に状態を表す非常に一般的なパターンがあります。この例では、スイッチがOnとOffの2つの状態を持ち、これらの状態で異なるビジュアルを持つことを望んでいます。これはStatesノードを使用して実現されます。新しいStatesノードを作成して始めましょう。

次に、2つの状態を作成します。

Statesノードは、定義した状態のいずれかになります。状態は、状態を追加すると表示されるStateプロパティによって指定された状態で開始します。後で、シグナルを接続することによって状態を切り替えます。

また、各状態に対してValuesを指定します。状態を追加したのと同じ方法で、単一の値を追加し、それをKnob Xと呼びます。それが何のためのものかわかるように、何と呼ぶかはあまり重要ではありません。この場合、それは2つの状態のためのノブの（Circleノードの）X位置を正しい位置に移動するためのものです。

各状態の値を指定します。スイッチがOn状態のときのX位置は40で、Off状態のときは0であるべきです。これらの値をStatesノードのプロパティに入力します。

StatesノードのKnob X出力をCircleノードのPos X入力に接続します。

ご覧のとおり、Statesノードは、Valuesの下で定義された各値に対応する出力を取得します。この出力は、Statesノードが状態を変更するときに指定された値に遷移します。異なる状態と遷移を見る一つの方法は、プロパティパネルのStateドロップダウンメニューで遊ぶことです。

Statesノードの出力接続にカーソルを合わせると、現在出力されている値を示す小さなポップアップが表示されます。この小さなポップアップをクリックすると、ポップアップが表示され続けるようにピン留めされます。これで、状態が一つから別のものに遷移するにつれて、出力値が変更されるのを見ることができます。

Statesノードの出力を好きなものに接続できます。この例では、両方ともNumberタイプの入力と出力を接続しました。数値以外のタイプを使用することもできます。Statesノードに新しいValueを追加します。それを"Background Color"と呼び、デフォルトのNumberタイプの代わりにColorタイプを選択してください。次に、2つの状態のために2つの異なる色を選択し、出力をCircleを含むGroupノードのBackground Colorに接続します。

最後に、スイッチGroupノードがクリックされたときにStatesノードが状態をトグルするようにすることができます。これは、GroupからのClickシグナルをStatesノードのToggle入力に接続することで達成されます。これにより、Statesノードはリスト内の次の状態にジャンプし、最後のものに達すると最初のものに再びジャンプします。この場合、2つの状態しかないので、OnとOffの間でトグルします。

遷移​

数値 と 色 のタイプについては、Statesノードは状態間で滑らかに遷移しようとします。時にはこれが望ましい動作ではないことがあり、また、遷移の挙動を変更したい場合もあります。Noodlでは、遷移カーブを編集して遷移の挙動を変更することができます。以下の例を見てください。ノードをコピーしてプロジェクトに古いノードを置き換えるか、新しいコンポーネントを作成できます。

このシンプルなグラフは、Groupのホバー状態を制御するStatesノードを持っています。ご覧のとおり、Groupはホバーされるとシグナルを送り、StatesノードをYes状態に遷移させます。マウスが離れる（ホバーが停止する）と、異なるシグナルが送られ、StatesノードをNo状態に変更します。Statesノードは、状態が変わるときにGroupノードのScaleとColorを変更します。効果は以下の通りです：

両方の遷移（色とサイズ）はデフォルトの遷移カーブを持っています。Statesノードのプロパティで遷移カーブを編集できます。Yes状態（つまり、ホバーされた状態）に移動するときの遷移を探します。

Defaultプロパティは、自分自身に特定の遷移カーブが設定されていない場合にすべての値に使用される遷移カーブです。すべての遷移のカーブを変更したい場合は、これを使用してください。

この場合、Size遷移のカーブを変更したいです。カーブエ

ディターを通じてカーブを編集できます。

カーブの異なる設定を試して、プレビューで長方形をホバーするときにそれらがどのように機能するかを見てください。ここに、Size遷移に少しバウンスがあり、Color遷移がリニアな例があります。カーブエディターの右側にあるプリセットアイコンを使用して、4つのプリセットの間で選択することを忘れないでください：

  • Ease In 最初は遅く、最後に向かって加速します。
  • Ease Out 最後に向かって減速します。
  • Ease In and Out 開始と終了がスムーズ/遅い。
  • Linear 線形アニメーション、即座に開始し、一定の速度を維持します。

状態の連鎖​

複数のStatesノードを接続して、より複雑なタイプのアニメーションを作成することもできます。以下のノードグラフでは、Groupノードを拡張する（幅を変更する）2番目のStatesノードがあります。2番目のStatesノード（Expandとラベル付けされている）は、状態YesとNoの間で幅を変更します。面白いことに、最初の状態ノード（ホバー状態）がYes状態に到達したときにトリガーされます。マウスが離れる（ホバー終了）と、最初のノードと同じようにNoに戻ります。

これにより、以下に示す動作が得られます。ご覧のとおり、最初のStatesノードはバウンシーなサイズ変更をトリガーし、直後に2番目のExpand statesノードが状態をYesに変更し、幅を拡張状態に遷移させます。

StatesノードはNoodlアプリで最も一般的に使用されるノードの1つであり、それをマスターすることで多くの素晴らしいインタラクションを作成できます。楽しんでください！