ソーター

ソーターを使用すると、要素とその子孫に適用できる視覚効果を制御できます。これらは、マウスをホバーすると白黒の画像をカラーに変換するなど、状況の変化に非常に役立ちます。

ソーターと代替効果についてさらに詳しく調べます。

このチュートリアルの内容: 

1. ソーターを理解する
2. ソーターの導入
3. 規制条件
4. トランジションの統合

ソーターを理解する

さまざまなソート方法から選択できます。 

• ファズ
• 色付け
• 強度
• 軽さ
• 違い
• 単核症
• セピア
• 逆行する

ソーターの導入

任意の要素の任意の場所に任意の category を設計できるのと同じように、ソーターを配置できます。画像に直接ソーターを適用できます。また、子孫を持つ要素にソーターを挿入することもできます。 

例として、3 つのリンク ブロックがあり、すべて同じ category (例: 「価格リンク ブロック」) を共有しているとします。 

追加するには ファズ ソーター: 

1. 進む スタイルパネル > 効果 > ソーター
2. プラス記号をタップすると ソーター
3. 選択する ファズ メニューから
4. ファズ半径を変更して、要素とその子孫のファズレベルを調整します。

ソーター メニューに戻って Fuzz から Mono に切り替えると、Link ブロックとその子孫はモノクロになります。

モノクロソーターの上に照明ソーターを追加するには:

1. プラスアイコン（+）をタップすると ソーター
2. 選ぶ 強度 メニューから
3. スライドして 量 スライダーを調整して 強度 レベル

この例では、両方のソーター（Mono と Intensity）が地層のように整理されています。各ソーターの表示を切り替えたり、各レイヤーをドラッグして順序を変更したりできます。 

規制条件

別の条件にあるときに要素のソーターを調整するには: 

1. を選択 リンクブロック （例：「価格リンクブロック」）
2. 旅行先 選択する分野 の中に スタイルパネル
3. 選ぶ ホバー メニューから 

の ホバー 状態は、 なし 条件（最初に整理したときにスタイリングしたもの） 単核症 そして 強度 したがって、それらのソーターはまったく同じままです。 

ホバー条件でソートを変更するには:

1. に向かう スタイルパネル > 効果 > ソーター
2. タップして 単核症 以前に設定したソーター
3. 改訂する 量 0%（リンクブロックの色を復元します）
4. タップして 強度 ソーター
5. 強度の見直し 量 100%に戻る

リンク ブロックにマウスを移動すると、更新されたエフェクトが実際に動いているのがわかります。 

トランジションを組み込む

なしとホバー条件間のソート効果をスムーズにするためのトランジションを追加します。

1. メニューに移動して 選択する分野 そして、 なし
2. 訪問 スタイルパネル > 効果 > トランジション
3. プラス記号をタップして 遷移
4. 選択する ソーター から 遷移タイプ メニュー 

これにより、None と Hover の条件を切り替えるように設定したソート機能への遷移が使用されます。 

遷移のタイミングを試し、リンク ブロックにマウスを移動して、遷移の持続時間を確認します。この状況では、デフォルトの 200 ミリ秒で十分です。プロジェクト内の要素にソーターを追加し続け、デザインにさらなる興味とインタラクティブ性を与えましょう。 

詳細はこちら スタイリング条件 条件間のアニメーションを改良する 遷移.