デジタルガーデン
明と暗のあいだで:iPhone 流テーマ切替
以前:儀式のない切替
テーマボタンは三状態を循環していた:自動 → ライト → ダーク。アイコンは即座に切り替わり、ページは瞬時に反転した。機能は完璧——でもあの「パチン」という音は、日没ではなく電気のスイッチだった。
iPhone はどうしているか
iOS はテーマを切り替える時、決して「パチン」と言わない。三つの層が同時に動く:
- アイコンのスプリング旋回——新しいアイコンは 0.4 倍の縮小と -100° の回転から、システムのスプリング曲線に沿って正位置へ。古いものは削除されたのではなく、旋回して現れたものに取って代わられた
- ボタンの反発——タップの瞬間に 0.86 まで縮み、弾き戻る。指先は目より先に「触れた」と知る
- ページ全体のクロスフェード——View Transitions API が新旧のフレームを撮り、0.5 秒で交差溶解する。スキンの交換ではなく、世界全体が光を変える
ひとつの門扉
ある細部がすべてを台無しにしかけた:これらのアニメーションを状態に吊るすと、初回レンダリングで自ら再生してしまう——誰もページを見る前に、アイコンがひとりでに旋回した。
解法は門扉:theme-switched クラスは、ユーザーが初めて本当にタップした後にのみ付与される。アニメーションはインタラクションのために存在し、レンダリングのためではない。
退化は尊厳の一部
prefers-reduced-motion のユーザーには清潔な即時切替を。未対応ブラウザはページのクロスフェードを自動でスキップし、アイコンのアニメーションは残る。すべてのユーザーが完全な機能を得る——テンポが違うだけだ。
モーションは、見たい人への贈り物であり、全員への関所ではない。
コメント