ui
Paper plane send animation / Fold into paper plane / Send message animation
01Demo触って、数値を決める
0.6〜0.9sで「折った」と読める。ease-in で畳むので、0.4sを切ると畳む途中が見えずに縮んで消えるだけになり、1.2sを超えると送信の反応が鈍く感じる。
foldDuration より0.05〜0.15s短くして、畳み終わる直前に重ねるのが目安(既定 0.75s に対して 0.65s)。同じか長いと便箋が消えてから紙飛行機が出る「間」ができ、別の物に見える。
2〜3sで遠くへ飛んでいく余韻になる。出だしの速い減速カーブなので、1.2sを切ると弾き飛ばしたように見え、3.5sを超えると完了表示までが待ち時間になる。
飛び出し時の傾き -20deg から、この角度まで機首を上げていく。35〜45degで上昇して遠ざかる。20だと傾きが変わらず滑っていくだけ、60を超えると宙返りしかける。
02Prompt数値はスライダーと連動
03 Vocab この動きを構成する語彙
clip-path: polygon() — 多角形で要素を切り抜く指定。頂点の数が同じなら補間できるので、四角い便箋を4点のまま紙飛行機の輪郭へ畳める。
overlap (handoff) — 前の動きが終わる直前に次の動きを始めて重ねる組み方。便箋が消えきる前に紙飛行機を出すと、2つが同じ物に見える。
scale to vanish — 遠ざかる物を scale で点まで縮めて消す手法。奥行き(Z)を使わずに「遠くへ行った」を出せる。
cqw / cqh — コンテナクエリ単位。container-type: size の要素の幅・高さに対する%。舞台の大きさに合わせて飛ぶ距離を決められる。
ease-out (減速) — 出だしが速く終わりがゆっくりのイージング。投げた紙飛行機の勢いが抜けていく様子。ここでは cubic-bezier(0.2, 0.5, 0.5, 1)。
04 NG → OK 伝え方の差分
NG
言い方: 「送信ボタンを押したら紙飛行機が飛んでいく感じにして」
なぜNG: 「飛んでいく感じ」では何が紙飛行機になるのか決まらない。ボタンのアイコンだけが右へ滑って消えるか、便箋がフェードで消えた後に別の紙飛行機がまっすぐ横切る実装が返り、畳む過程と重ね合わせが抜けて「書いたものが飛んだ」に見えない。
OK
言い方: 「paper plane sendで。便箋を0.75s ease-inでclip-pathの4点ポリゴンへ寄せて scale(0.45) rotate(-20deg) に畳み、0.65sで紙飛行機に入れ替えて2.6s cubic-bezier(0.2,0.5,0.5,1)でtranslate(40cqw,-65cqh) rotate(-40deg) scale(0.02)へ。transformのみ」
なぜOK: 便箋→紙飛行機の形の受け渡し(同じ4点のclip-path)と、畳み終わる0.1s前に重ねる時間差、遠ざかり方(縮小と機首上げ)を値で指定した。この3つで「折って、飛ばして、届いた」が1つの出来事になる。