マテリアル デザイン アニメーション_html/css_WEB-ITnose

マテリアル デザイン アニメーション

本物の動き本物の動き

動きは優雅に流れる形で空間関係、機能、目的を表します

質量と重量: 質量と重量

物体が動くためには、力の強さと持続時間が物体の動きの方向の加速や変化を決定します。オブジェクトの加速や減速にはある程度の時間がかかるため、アニメーションの開始や終了が急だったり、方向が急に変わったりすると、不自然になってしまいます

マテリアルデザインの動きは、シンプルさと美しさを失わずにエレガントである必要があります。実際の物理的な動きと現実世界の動作にできるだけ近い

自然な加速と減速

加速と減速の変化は、アニメーションの継続中に滑らかに変化する必要があります

特定の目的のため。オブジェクトに変化を与えたり、アニメーションに特性を追加したりする場合は、最初と最後の加速度を変更することができます

加速と減速を非対称にすることで、より自然で快適なモーションを作成できます

加速と減速が滑らかでない場合、モーションは変化します。機械的なものに見え、速度や方向の急激な変化は不快に見え、注目を集めます。

これが、直線的な変化よりも非対称な曲線の変化の方が優れている理由です。直線的な変化には常に急激な変曲点があるため、直線的な変化です。

入口と出口

オブジェクトの速度と方向の変化は、ユーザーの注意を引きます

フレームに入るときと出るときの速度の変化は、そのオブジェクトが移動する距離を示します。

たとえば、オブジェクトが終了するときに速度が低下する場合、それは画像フレームの外側の境界線から遠く離れていないことを意味し、注目を集めます

特に、遷移アニメーションを作成する場合は、どの部分を考慮する必要があります。最も注目を集めるのは入口と出口の両方です。

不必要な注意を引くために、入口と出口の両方で速度を上げてはいけません。ユーザーの注意を集中させて注意をそらす

調整を行う

軽い物体や小さな物体はより少ない力で移動できるため、より速く移動できるわけではありませんが、より大きな物体やより重い物体は加速に​​時間がかかります。曲線の動きを使用し、線形にセグメント化されたパスを避けて、オブジェクトに最適なモーション特性を見つけてください。その後、曲線は特定の値の範囲内での時間の経過に伴う変化を表します。

レスポンシブ インタラクション レスポンシブ インタラクション

ユーザー入力

タッチ、サウンド、マウス、キーボードはすべてタッチ可能である必要があり、ビジュアル キューとモーション キューが必要です。ユーザー入力を即座に認識し、次のような方法で表示する必要があります。

表面反応

入力イベントを受け取った後、システムはタッチポイントで即座に視覚的な確認の手掛かりを提供する必要があります。例: 指のクリック場所、音声入力マイク、キーボードのクリック

この接触を表現するための中心的な視覚メカニズムは、次のとおりです。

デバイスは、クリック イベント メソッドと永続イベントを表現します。音量やクリック圧力などの他の動的変数を表現するために使用されます

ベストプラクティス: 入力接点 (指先の接点やサウンドマイクのアイコンなど) から開始して、視覚的な応答を広げます。放射状に (放射状に、放射状に)

マテリアルの反応

クリックするとマテリアルが持ち上がり、アクティブな状態を示します。マテリアルを変更するか、既存のマテリアルを変換するか、ドラッグまたはスワイプしてマテリアルを直接操作します

マテリアルは直線または放射状にサイズ変更できます。

状態遷移中のアニメーションの表示: http://developer.android.com/training/material/animations.html#ViewState

Origin: ユーザーが新しいマテリアルの生成をトリガーするとき、入力から開始する必要がありますポイント サイズを大きくすることから始めます。これにより、入力と生成の間の接続が確立されます。

クリックして上げる: カードまたは取り外し可能な要素がアクティブ化されると、カードがアクティブ状態であることを示す必要があります。

ビューの高さを指定します: http://developer.android.com/training/material/shadows-clipping.html#Elevation

Radial Action: 放射状の動作

should ユーザーに視覚的な応答を追加する入力するとより明確になります

入力ポイントから広がるインクの視覚的な波紋は視覚的です: 入力イベントと画面上のイベントの間の接続は視覚的に結合される必要があります。またはマウスの場合、これは接触点で発生します。タッチの波紋は、タッチが発生した位置と時間を識別します。また、クリック入力が受信されたことも示します。

入力と動作を接続する

: 入力イベントによってトリガーされる遷移または動作は、入力イベントと視覚的に関連している必要があります。震源地近くのリップル反応は、遠く離れた反応よりも発生する可能性が高くなります。たとえば、次のようになります。コンテンツの変更: 多くの画像が表示されたり消えたりします。 2. 一連のマテリアルの動き: カードが画面の内外に移動します。 リビール エフェクトを使用します: http://developer.android.com /training/material/animations。 html#Reveal

意味のあるトランジション 意味のあるトランジション

モーション デザインは、情報を提供することと喜ばせることの 2 つの方法でユーザーの注意を効果的に誘導できます。

視覚的な連続性 視覚的な連続性

2 つの視覚的な状態の間の遷移は、明確かつスムーズで、簡単に行われる必要があります。

変換のタイプと動作:

受信要素: 新しく生成されたアイテムまたは再構築されます。

コンテキストに関係のなくなった要素は削除されます。要素: トランジション中に存在する要素。小さいもの (アイコン)、または主要な要素 (ギャラリー画像) があり、画面全体を占めるように大きくなります。

カスタム アクティビティのトランジション: http://developer.android. com/training/material/animations.html#Transitions

注:

アニメーションをデザインするときは、次の点に注意してください:

1. ユーザーの注意をどこに向けるべきか。この目的を達成するには、変換プロセス中に受信要素、送信要素、共有要素をどのように強調する必要がありますか?

2. 遷移状態間の視覚的な接続を、色または永続的な要素を通じて作成します。 3. 正確な動きを使用する

階層的なタイミング

要素の動きの順序とタイミングに注意してください。動きは、最も重要なコンテンツを伝える視線の経路を確立することで、情報の継承関係をサポートします

ただし、これは、最も重要なものが最初に移動し、最も重要でないものが最後に移動するという単純な公式ではありません。要素の変換のタイミングは、ばらばらな感じを避け、スムーズに流れる必要があります。

一貫した振り付け

トランジション内の要素は、意味があり、順序立てて移動する必要があります。注意してください。

トランジション内の要素が調整されていると、ユーザーがアプリケーションをよりよく理解するのに役立ちます。

曲線モーションを使用する: http://developer.android.com/training/material/animations.html#CurvedMotion

ベスト プラクティス:

1. ただし、モーションが 1 つの軸に限定されている場合は、直線パスを避けるようにしてください。例外は、上に移動する場合、または特定の点に向かうまたは遠ざかる場合です。

2. トランジション中に方向要素の動きを一貫して保ちます。

3. 要素の移動とは何ですか。奥行きとその理由は何ですか?

4. すべての移動要素が画面上でそのパスに従っていると、見た目は整然としていますか?

5. 一貫した動きによって要素間の空間的関係を強調します。

楽しい詳細

アニメーションは、詳細なアイコンからキーの遷移やアクションに至るまで、アプリ内のすべての要素コンポーネントに存在できます。アニメーションの最も基本的な使用法はトランジションですが、小さな場所でのアニメーションの使用はユーザーを本当に喜ばせることができます。矢印または再生ボタンはスムーズな移行を制御し、同時に 2 つの機能を提供します。ユーザーに通知することと、アプリ自体をその瞬間で満たすことです。 www.google.com/design/spec/animation/authentic-motion.html