覆い隠してから表示するアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上で文字などのオブジェクトを覆い隠してから表示させるアニメーションの作成方法について記載します。

実際の挙動

長方形シェイプが左から伸びて右へ縮むアニメーションの後で文字が表示します。
『ラグ無』では4行全てが同時に表示が切り替わり、『ラグ有』では切り替わりタイミングをズラして表示しています。

作成方法

まずテキスト（覆い隠してから表示したい）部分を作成し、同サイズのフレームで囲みます。

1行ずつ囲むようにフレームを作成します。

1行ずつの各フレーム内に横幅1pxのシェイプを作成します。
シェイプはフレームの下階層かつ『x:-1px』に配置します（フレーム外に置いて非表示にしたいため）。
この横幅1pxのシェイプが覆い隠す部分となります。

テキストの塗りの透明度を0%にします。

全体をコンポーネント化します。
これ以降はバリアントの追加でアニメーションを作成しますが、ラグ有無で作成方法が異なってきます。

『ラグ無』の作成方法

『ラグ無』全体の構成は下画像の通りになります。

バリアント1
【クリック時】のトリガーを設定していますが、画面表示と同時にアニメーション開始したい場合は【アフターディレイ】をトリガーにします。

バリアント2
覆い隠す用の各シェイプを伸ばします。
他の行とアニメーション時間を揃えるために、このシェイプの長さは一番横幅が長いフレーム+2pxになるように設定します（xは-1pxのまま）。

バリアント3へのプロトタイプは【アフターディレイ】かつ【スマートアニメート】を設定します。

バリアント3
このバリアントで覆い隠すシェイプ裏の文字の塗りを100%に戻します。

バリアント4へのプロトタイプは先ほどと同様に【アフターディレイ】かつ【スマートアニメート】を設定します。

バリアント4
覆い隠す用の各シェイプを右に縮めます。
横幅は1pxに、位置はフレーム外に1pxずらすように配置します。
この際、下画像の赤枠部分の角度が0°になっていることを確認してください（180°になっていると反転してしまっています）。

あとはプレビューを確認して問題なく動けば完成です。

『ラグ有』の作成方法

『ラグ有』全体の構成は下画像の通りになります。

バリアント1
【クリック時】のトリガーを設定していますが、画面表示と同時にアニメーション開始したい場合は【アフターディレイ】をトリガーにします。

バリアント2~8
今回は覆い隠すアニメーションを50%ずつズラしてラグにしています。
その為、1行の50%ずつ覆い隠しと表示を進めています（下画像参照）。
テキストの塗りは各【100%覆い隠し】→【50%表示】の間で1行ずつ100%にしています（【50%覆い隠し】→【100%覆い隠し】間で1行の左半分、【100%覆い隠し】→【50%表示】間で残り半分を塗り100%にする方法でもOKです）。

100%表示後の覆い隠し用シェイプの横幅は1pxに、位置はフレーム外に1pxズラすように配置します。
この際、下画像の赤枠部分の角度が0°になっていることを確認してください（180°になっていると反転してしまっています）。

各バリアントのプロトタイプは【アフターディレイ】かつ【スマートアニメート】を設定します。

あとはプレビューを確認して問題なく動けば完成です。

まとめ

以上、Figmaプロトタイプ上で文字などのオブジェクトを覆い隠してから表示させるアニメーションの作成方法でした。