スマートアニメートによる高度なアニメーションの作成
はじめに
この機能を使用できるユーザー
すべてのチームまたはプランのユーザー
ファイルの編集可のアクセス権があるユーザーは、プロトタイプを作成して編集できます。
ファイルまたはプロトタイプの閲覧のみのアクセス権があるユーザーは、プロトタイプを表示できます。
スマートアニメートは、プロトタイプのフレーム間でマッチングレイヤーを検知して、違いを認識し、レイヤーにアニメーションを付けます。
プロトタイプを作成するときにトランジションのリストから[スマートアニメート]を選択できます。また、他のトランジションにスマートアニメートを適用して、シームレスなアニメーションを作成することもできます。
スマートアニメートを使用すれば、高度なアニメーションを簡単に作成できます。次のような動作を再現するにはスマートアニメートを使用します:
- 読み込みシーケンス
- スクロール時のパララックス効果
- ドラッグ、スワイプ、長押しなどのタッチジェスチャー
- スライダー、トグル、スイッチ
- コンテンツの展開(詳細表示/簡易表示)
- プルして更新
スマートアニメートの作成方法に関するブログ記事: スマートアニメート機能のリリース
サポートされるプロパティ
スマートアニメートは複数のフレームに共通で存在するマッチングレイヤーを検知します。レイヤー名とレイヤーの階層が考慮されます。
フレーム間で一致するレイヤーがある場合、変更が認識され、その間をアニメートするトランジションが適用されます。
スマートアニメートは、オブジェクトやコンポーネント全体、およびコンポーネント内やグループ内の個々のレイヤーにも適用できます。
フレーム間では、オブジェクトの複数のプロパティが変更されることが考えられます。サポートされるプロパティについては、以下の各項目を参照してください。
拡大縮小
オブジェクトのサイズがフレーム間で変更されると、縮小または拡大のアニメーションが適用されます。
位置
x座標とy座標でオブジェクトの位置が変わったかどうかが認識され、現在の位置から移動先のフレームの位置まで移動するアニメーションが適用されます。
不透明度
スマートアニメートは、レイヤーやオブジェクトの不透明度も認識できます。不透明度を調整し、フレーム間でオブジェクトを出現させたり消したりできます。
レイヤー表示を切り替える代わりに、レイヤーの不透明度を0%に設定すると、ディゾルブトランジションが適用され、レイヤーの不透明度がアニメートします。
レイヤーの[塗り]プロパティ、および[レイヤー]プロパティで不透明度を調整できます。スマートアニメートは両方に適用されます。
レイヤー全体の不透明度を調整することをおすすめします。右サイドバーにある[デザイン]タブの不透明度の[レイヤー]設定を調整します。
回転
スマートアニメートでは、レイヤーの回転とその方向も考慮されます。
右サイドバーの回転フィールドを使用するか、キャンバス内でオブジェクトを回転できます。オブジェクトの境界の角にマウスカーソルを合わせて、回転カーソルを表示します。
1つのレイヤーを回転させたり、1つのアンカーポイントを中心とし複数のレイヤーを一度に回転させられます。
塗り
オブジェクトの塗りのすべての変更に対して、スマートアニメートが適用されます。単色、グラデーション、画像の塗りの間で、差分をアニメートできます。
注意点
- Figmaでは、エフェクトの変更またはシェイプの変更に対するスマートアニメートはサポートされていません。プロパティがサポートされていない場合は、デフォルトのディゾルブトランジションが適用されます。
- Figmaではオーバーレイアクションのスマートアニメートはサポートされていません。オーバーレイが新しいフレームとして処理されるためです。オーバーレイを入れ替えるときは、それらのオーバーレイにマッチングレイヤーがあれば、スマートアニメートを使用できます。
- 移動先のフレーム内に新しいレイヤーを配置すると、スマートアニメートはレイヤーをディゾルブで表示します。
- レイヤーのプロパティが2つのフレーム間で同じであれば、そのレイヤーにアニメーションは適用されません。これはステータスバーやメニュー、および別のUIに移動しないときのインタラクションに最適です。
- レイヤーの[スクロール時に位置を固定]チェックボックスをオンにすると、[固定]レイヤーのリストにそれらのレイヤーが追加されます。スマートアニメートを他のトランジションと合わせて使用している場合、スマートアニメートではレイヤーが別々に処理されます。
スマートアニメートの適用
プロトタイプでスマートアニメートを使用する場合は、2つの方法があります。単独のトランジションとして使用するか、マッチングレイヤーでスマートアニメーションを実行するを他のアニメーションで使用します。
スマートアニメート
トランジションフィールドで[スマートアニメート]を選択し、2つのフレーム間のアニメーションを設定します。
- 右サイドバーにある[プロトタイプ]タブを開きます。
- キャンバスで[レイヤー]、[グループ]、または[フレーム]を選択します。コネクションノードは右隅に表示されます。
- ノードをクリックし、それを次のフレームにドラッグしてコネクションを作成します。
- 右サイドバーでトリガーとアクションを選択し、インタラクションを定義します。移動先として2番目のフレームが設定されます。
- [アニメーション]セクションで、トランジションフィールドから[スマートアニメート]を選択します。
- [イージング]をトランジションに適用するか、または[所要時間](オプション)を変更します。
- スマートアニメートする他のフレームに対して同じ作業を繰り返します。
- ツールバーのをクリックしてプレゼンテーションビューでプロトタイプを開きます。
以下の例では、複数のマッチングレイヤーを含む3つのフレームがあります。スマートアニメートを使用して、お気に入りのリストからAbel Tasman Coast Trackを削除するアニメーションを設定します。
スマートアニメートにより、プロトタイプ内の各フレームをスムーズに移動しています。
マッチングレイヤーでスマートアニメートを実行する
他のメイントランジションを使用しているときに、プロトタイプ内のいくつかのレイヤーをスマートアニメートする場合は、[マッチングレイヤーでスマートアニメートを実行する]チェックボックスをオンにします。
スマートアニメートを他のトランジションで使用するときに、固定レイヤーは別に処理されます。
- 一致しないレイヤー: 選択したメイントランジションが使用されます。
- 一致するレイヤー: サポートされているプロパティの差異が、すべてスマートアニメートされます。
- 一致する固定レイヤー: トランジションは適用されません。
- 一致しない固定レイヤー: 選択したトランジションの代わりにディゾルブが適用されます。
アニメーションの調整時に[マッチングレイヤーでスマートアニメートを実行する]を使用するには、右サイドバーでチェックボックスをオンにします。
以下の例では、ステータスバーとナビゲーションが3つのフレームすべてに配置されています。タブを切り替えても、これらが同じ位置に留まるようにします。
フレーム間の移動に、プッシュトランジションを選択しています。ここでは[マッチングレイヤーでスマートアニメートを実行する]の横のチェックボックスをオンにしていません。
プロトタイプを表示すると、移動先のフレームのすべてがプッシュトランジションを使用していることが確認できます。プロトタイプの別々の画面間を移動していることが明確です。
[マッチングレイヤーでスマートアニメートを実行する]の横のチェックボックスをオンにすると、ステータスバーとナビゲーションは同じ位置を保持し、その他のコンテンツにはプッシュが適用されます。
スマートアニメートのヒント
スマートアニメートの前は、レイヤー名は重視されていませんでした。スマートアニメートはレイヤー名と階層に依存するため、異なるアプローチが必要となる場合があります。
スマートアニメートによる予想外の結果に対するトラブルシューティングをいくつか紹介します。
ヒント! プロトタイプの作成時にはアニメーションの所要時間を大きくすることをおすすめします。そうすることで、発生している問題の確認や調整ができます。
レイヤー名
スマートアニメートするフレームの簡単な作成方法の1つは、フレームを複製することです。これにより、各フレーム間で名前の一貫性が確保されます。その後、必要に応じて各フレームのレイヤーを追加および削除できます。
複製やコピーと貼り付けの方法に基づいて、フレームとレイヤーに名前が付けられます。
- フレーム内: レイヤーに連続した番号(フレーム1、フレーム2など)が付けられます。
- フレーム間: 同じ名前が使用されます。あるフレームから
長方形1をコピーすると、次のフレームに長方形1が貼り付けられます。
フレーム間で、オブジェクトやレイヤーが異なる名前で存在している可能性があります。または反対に、マッチングさせたくない複数のレイヤーがすべて同じ名前で存在している可能性もあります。
左サイドバーにあるレイヤーパネルを使用すると、レイヤー名の確認/更新ができます。レイヤー名の一括変更方法を参照してください。
マッチングレイヤーの確認
複数のフレームに存在する、またはフレーム間でマッチするレイヤーやオブジェクトの識別も容易です。これはすべてのレイヤー、グループ、フレーム、コンポーネントに当てはまります。
- 右サイドバーにある[プロトタイプ]タブを開きます。
- キャンバス内のオブジェクトまたはレイヤーにマウスカーソルを合わせます。
- そのレイヤーを含む他のすべてのフレームで、レイヤーがハイライトされます。
レイヤーの順序と階層
[スマートアニメート]と[マッチングレイヤーでスマートアニメートを実行する]では、レイヤーの順序、またはレイヤーの階層が考慮されます。
通常、ムーブインまたはスライドインでは、元のフレームの上に移動先のフレーム全体が現れます。マッチングレイヤーでスマートアニメートを使うと、階層に基づいてレイヤーがムーブインまたはスライドインされます。これが混乱や予期しない結果の原因となる可能性があります。
以下のスクリーンショットでは、2つのフレーム(エクスプローラー1とエクスプローラー2)の間にマッチングオブジェクトが2つあります。ステータスバーとナビゲーションです。
マッチングレイヤーの上にレイヤーがある場合、それらのアニメーションは移動先フレームより上で発生します。以下のスクリーンショットでは、エクスプローラー1のレイヤーが移動先フレームより上に表示されています。
代わりにマッチングレイヤーを階層の一番上に移動することで、移動先のフレーム全体が元のフレームより上でスライドします。
レイヤーのグループ化
スマートアニメーションの設定対象をより厳密に決定するために、名前と階層に基づいてレイヤーがマッチングされます。これはフレーム間のマッチングを簡単に解除できることを意味します。
各フレームに5つの長方形があるとします。これらの長方形には、各フレーム間で異なるコンテンツが含まれます。3つのフレームの間で、トリップ1からトリップ5までのラベルを付けました。
プッシュトランジションを適用すると、スマートアニメートでは、それらがマッチングレイヤーとして認識されます。Figmaは、これらの長方形を新しいコンテンツとして扱うのではなく、それらの位置の変更をスマートアニメートします。
この動作を変更するには、各フレームの長方形のトリップをグループ化して、それらに一意の名前を付けます。
トランジションをプレビューすると、スマートアニメートでこれらがマッチングレイヤーとして認識されなくなります。コンテンツが一緒にプッシュされ、プロトタイプの見え方がより実際に近くなります。
スライドインとムーブインのスマートアニメート
スライドまたは移動のトランジションで[マッチングレイヤーでスマートアニメートを実行する]を使用するときは、いくつかの考慮すべき点があります。
選択すると、フレーム間のすべてのマッチングレイヤーにアニメーションが適用されます。つまり、移動先フレーム(B)が最初のフレーム(A)の上に移動するような通常のアニメーションではなくなります。
また、アニメーションにフレームの塗りは含まれません。これによって、レイヤーが重複してトランジションが見にくくなる場合があります。
これを避けるためには、他のレイヤーの背後に単色塗りの長方形を追加します。作業後にプロトタイプを表示すると、各フレームのコンテンツが一緒にスライドインします。
