Motion Design
動きの中に宿る
詩と意味
静止した画面は、動きによって初めて命を得ます。Storm Phoenix Glideのモーションデザイン哲学は、嵐の動力学と不死鳥の優雅な飛翔から生まれた独自のアプローチです。
モーション原則
動きを支配する
6つの法則
01
意図性のある動き
すべての動きには理由が必要です。装飾的なアニメーションは排除し、ユーザーの注意を誘導し、情報の階層を明確にする動きのみを採用します。
02
自然のイージング
機械的な直線運動は自然界に存在しません。重力、慣性、空気抵抗を模倣したカスタムイージングカーブが、生命感のある動きを生み出します。
03
時間のコントロール
速度と間合いの精密な制御が、感情のコントロールです。素早い動きはエネルギーを、ゆっくりとした動きは重厚感と重要性を伝えます。
04
コレオグラフィ
個々の要素の動きを舞踏のように振り付ける。適切なステージングとディレクションが、複雑なUIを直感的に読み解ける空間へと変えます。
05
レスポンシブ反応
デバイスの性能と環境に適応するモーション。高フレームレートのスムーズなアニメーションから、省電力モードでの最小限の動きまで対応します。
06
フェニックスリズム
嵐の上昇気流のような力強い立ち上がりと、着地の柔らかさ。フェニックスが翼を広げるような躍動感が、Storm Phoenix Glideのモーション言語の核です。
イージングカーブ
動きの速度を
デザインする
Ease Out
cubic-bezier(0,0,0.2,1)
素早く始まり、ゆっくり終わる。エレメントの登場やフィードバックに最適です。
Ease In
cubic-bezier(0.4,0,1,1)
ゆっくり始まり、素早く終わる。要素が退場する際の自然な加速感。
Ease In Out
cubic-bezier(0.4,0,0.2,1)
状態間の遷移に最もバランスの取れた曲線。自然で滑らかな印象。
Phoenix Glide
cubic-bezier(0.25,0,0.8,0.85)
Storm Phoenix Glide独自のカーブ。嵐の上昇と着地を模倣した躍動感。
モーションライブラリ