UIモーフィングアニメーションのデザイン

ひとつの図形が映像全体を担う仕組み

映像は120 BPMで14秒間続き、ソースのメモではこれを7小節に分けています。ひとつの図形がGenerateボタンから始まり、ローダー、チェック、ダイナミックアイランド、ミュージックプレーヤー、音量スライダー、トグル、タブインジケーター、チャート、コマンドパレット、トーストへと変わり、再びボタンに戻ります。

トレードオフとして、すべての状態は、同じ本体のサイズと角丸を変えるだけで、直前の状態から到達できなければなりません。その形の変化に合わない内容は、削るか作り直す必要があります。

プレーヤー、タブ、パレットのフレームを読む

キャプチャした3つのフレームは、同じ図形がいかに違って見えるかを示しています。プレーヤーでは、黒い角丸のカードにグラデーションのタイル、「motion study 02」、0:49の位置のスクラブバーと残り−2:09、前へ・再生・次へのアイコンが載っています。タブのフレームでは、白いピルにDay、Week、Monthが並び、Dayの背後に黒いインジケーターがあります。

パレットでは、入力された「frame」という単語から「Frame rate · 60fps」と「Every frame is code」の2件の結果が導かれ、最初の結果がハイライトされています。

01

読み取りやすい再生状態

経過時間と残り時間のラベルはプログレスバーの下にあります。これらは14秒の映像内のイラスト的なインターフェース内容であり、ショーケース動画の再生時間ではありません。プレーヤーを小さなキャンバスに合わせる際も、両方のラベルを読みやすく保ってください。

02

タブインジケーターは動くオブジェクト

カーソルがMonthの上にある間、黒いDayのピルは白いトラックの中にあります。インジケーターは独立した図形なので、ハイライトを入れ替えるのではなく、ラベルの間をスライドしたり伸びたりできます。

03

パレットのテキストは映像に合わせる

結果の「Frame rate · 60fps」と「Every frame is code」は、作品自体について語っています。この考え方は再利用できますが、文言は自社プロダクトの語彙に置き換えてください。

時間駆動の構築とそのトレードオフ

ソースのメモでは、マスタータイムラインの時間からフレーム全体を描く単一のrender(t)関数が説明されています。表示されるすべての値は、イージング、スプリング、キーフレームを用いたtの純粋関数で、フレーム間で状態は引き継がれません。そのため、後方へシークしても同一のフレームが再現されます。

これによりエクスポートは予測しやすくなりますが、制作者にはより多くが求められます。ホバーや入力など、イベントハンドラーなら簡単な操作も、時間指定のキーフレームとして書かなければなりません。

1. 時計はひとつに保つ

   GSAPのマスタータイムラインが唯一の時計です。各レイヤーは独自のタイマーを動かさず、その現在時刻を読みます。

2. 変化ごとにスプリングを合算する

   翻案メモでは、変化ごとにスプリングを合算するよう求めています。これにより、重なった動きは再始動せずに混ざり合います。

3. すべてをカーソルに引き起こさせる

   各状態の変化の前にはポインター操作が必要です。このルールがないと、モーフィングはインタラクションではなく装飾に見えてしまいます。

出典と範囲

これは、X上の@twoclippingが最初に投稿したモーション作品を、OpenDesignが公式にコードで作り直し、翻案したものです。公開された作品を基にコードで再構築しており、14秒のサウンドトラックは元の音源ではなくオリジナルのスコアです。クレジットは事実としての参照であり、原作者による推奨を示すものではありません。

これはレンダリングされたモーションスタディであり、使えるインターフェース製品ではありません。映像内のプレーヤー、チャート、パレットは入力に反応しません。このテンプレートはOpenDesignの動画ワークフロー案に由来し、利用可否はインストールされているバージョンによります。

モーフィングを自社プロダクトに合わせて応用する

メモでは、SHAPE定義の状態とその内容を差し替えつつ、3つのルールを守ることを提案しています。カットされないひとつの図形、変化ごとに合算するスプリング、すべての変化の背後にあるカーソルです。まず、最も見せたいプロダクトの状態を5つ挙げ、コンテナの小さいものから大きいものへ並べてください。

ループさせたい場合は、最初と最後の状態を同一にします。状態同士のサイズが大きく異なると、中間フレームが引き伸ばされて見えるため、それに応じてテンポを落としてください。