物理オプション
スプリング、慣性など様々な物理エンジンによる自然なアニメーション
物理オプション (Physics Options)
SSGOI 4.0は様々な物理エンジンをサポートし、自然で滑らかなアニメーションを実現します。スプリング物理から慣性ベースのアニメーションまで、各状況に最適なモーションを選択できます。
PhysicsOptionsインターフェース
すべてのトランジションはphysicsオプションで物理エンジンを設定できます:
type PhysicsOptions = {
spring?: SpringConfig; // スプリング物理 (ease-out効果)
inertia?: InertiaConfig; // 慣性物理 (ease-in効果)
integrator?: () => Integrator; // カスタムインテグレータ
};
各物理エンジンは異なるアニメーション特性を提供し、状況に応じて選択できます。
スプリング物理 (Spring Physics)
スプリング物理はease-out効果を生成し、ほとんどのUIアニメーションに適しています。
基本的な使い方
import { fade } from '@ssgoi/react/view-transitions';
// 基本スプリング設定
fade({
physics: {
spring: {
stiffness: 300,
damping: 30
}
}
})
スプリング設定オプション
type SpringConfig = {
stiffness: number; // スプリングの剛性 (高いほど速いアニメーション)
damping: number; // 減衰係数 (高いほど振動が減少)
doubleSpring?: boolean | number | {
stiffness: number;
damping: number;
};
};
- stiffness: スプリングの張力を制御します。値が高いほどアニメーションが速くなります。
- damping: 抵抗を制御します。値が高いほど振動が減少し、より滑らかに停止します。
- doubleSpring: ease-in-out効果のためのダブルスプリング設定
ダブルスプリング (Double Spring)
doubleSpringオプションを使用すると、2つのスプリングをチェーンで接続してease-in-out効果を作成できます:
// 自動設定 (true)
fade({
physics: {
spring: {
stiffness: 300,
damping: 30,
doubleSpring: true // followerスプリングが自動設定されます
}
}
})
// 比率で設定 (0~1)
fade({
physics: {
spring: {
stiffness: 300,
damping: 30,
doubleSpring: 0.5 // followerスプリングのstiffness比率 (小さいほど強いease-in)
}
}
})
// 手動設定
fade({
physics: {
spring: {
stiffness: 300,
damping: 30,
doubleSpring: {
stiffness: 150, // followerスプリング設定
damping: 20
}
}
}
})
慣性物理 (Inertia Physics)
慣性物理はease-in効果を生成し、方向性のある遷移(drill、slideなど)に適しています。
基本的な使い方
import { drill } from '@ssgoi/react/view-transitions';
drill({
direction: 'enter',
physics: {
inertia: {
acceleration: 20,
resistance: 1.5
}
}
})
慣性設定オプション
type InertiaConfig = {
acceleration: number; // 加速力 (大きいほど速い加速)
resistance: number; // 抵抗係数 (大きいほど低い最終速度)
resistanceType?: 'linear' | 'quadratic'; // 抵抗タイプ
};
- acceleration: 加速力を制御します。値が大きいほど速く加速します。
- resistance: 抵抗係数を制御します。値が大きいほど最終速度が低くなります。
- resistanceType: 抵抗タイプ (linear: 線形, quadratic: 2次関数)
使用例
import { slide } from '@ssgoi/react/view-transitions';
// 滑らかなease-in効果
slide({
direction: 'up',
physics: {
inertia: {
acceleration: 15,
resistance: 1.2,
resistanceType: 'linear'
}
}
})
// 速いease-in効果
slide({
direction: 'down',
physics: {
inertia: {
acceleration: 30,
resistance: 2.0,
resistanceType: 'quadratic'
}
}
})
スプリングプリセット
物理値を手動で調整せずに、様々なアニメーション効果を簡単に作成できるよう、事前定義されたスプリング設定を提供しています。
プリセットのインポート
import { config } from '@ssgoi/react/presets';
// または
import { config } from '@ssgoi/svelte/presets';
// または
import { config } from '@ssgoi/angular/presets';
// トランジションで使用
transition({
physics: { spring: config.gentle },
tick: (progress) => {
// アニメーションロジック
}
})
個別のプリセットをインポートすることもできます:
import { gentle, wobbly, stiff } from '@ssgoi/react/presets';
transition({
physics: { spring: gentle },
// ...
})
利用可能なプリセット
default
ほとんどのユースケースに適したバランスの取れたアニメーション。
- stiffness: 170
- damping: 26
- ユースケース: 汎用的なトランジション
gentle
微妙な動きを持つ滑らかで落ち着いたトランジション。
- stiffness: 120
- damping: 14
- ユースケース: エレガントでプロフェッショナルなインターフェース
wobbly
顕著なスプリング効果を持つ弾力的で遊び心のあるアニメーション。
- stiffness: 180
- damping: 12
- ユースケース: 楽しくインタラクティブな要素
stiff
最小限のオーバーシュートで素早く反応するアニメーション。
- stiffness: 210
- damping: 20
- ユースケース: 素早いUIレスポンス、ツールチップ
slow
慎重で計測されたアニメーション。
- stiffness: 280
- damping: 60
- ユースケース: 重要な状態変更、リビール効果
molasses
非常に遅く粘性のある動き。
- stiffness: 150
- damping: 60
- ユースケース: ドラマチックな効果、ローディング状態
カスタム物理設定
プリセットの代わりに独自の物理設定を作成できます:
カスタムスプリング
transition({
physics: {
spring: {
stiffness: 150,
damping: 15
}
},
// ...
})
カスタム慣性
transition({
physics: {
inertia: {
acceleration: 25,
resistance: 1.8,
resistanceType: 'linear'
}
},
// ...
})
物理エンジンの組み合わせ
一部のトランジションでは、INとOUTアニメーションに異なる物理エンジンを使用できます:
fade({
inPhysics: {
spring: {
stiffness: 300,
damping: 30
}
},
outPhysics: {
inertia: {
acceleration: 20,
resistance: 1.5
}
}
})
例
ビュートランジションで物理オプションを使用
import { Ssgoi } from '@ssgoi/react';
import { config } from '@ssgoi/react/presets';
import { fade, drill } from '@ssgoi/react/view-transitions';
const ssgoiConfig = {
// スプリングプリセット使用
defaultTransition: fade({
physics: { spring: config.gentle }
}),
transitions: [
{
from: '/home',
to: '/about',
transition: fade({
physics: {
spring: {
stiffness: 300,
damping: 30,
doubleSpring: true // ease-in-out効果
}
}
})
},
{
from: '/products',
to: '/products/*',
transition: drill({
direction: 'enter',
physics: {
inertia: {
acceleration: 20,
resistance: 1.5
}
}
})
}
]
};
要素トランジションで物理オプションを使用
import { transition } from '@ssgoi/react';
import { config } from '@ssgoi/react/presets';
// スプリングプリセット使用
const fadeIn = transition({
physics: { spring: config.slow },
tick: (progress) => ({
opacity: progress,
transform: `translateY(${(1 - progress) * 20}px)`
})
});
// カスタムスプリング使用
const slideIn = transition({
physics: {
spring: {
stiffness: 200,
damping: 25,
doubleSpring: 0.4 // ease-in-out効果
}
},
tick: (progress) => ({
opacity: progress,
transform: `translateX(${(1 - progress) * 50}px)`
})
});
物理エンジン選択ガイド
各物理エンジンは異なるアニメーション効果を提供します:
スプリング物理 (Spring)
- 効果: ease-out (速く始まり、ゆっくり終わる)
- 適した用途:
- フェードイン/アウト
- モーダルの開閉
- ツールチップ表示
- 要素の出現/消失
- 利点: 自然で滑らかな減速、UIで最も広く使用される
ダブルスプリング (Double Spring)
- 効果: ease-in-out (ゆっくり始まり、速く進み、ゆっくり終わる)
- 適した用途:
- 長距離の移動
- ページ遷移
- 重要な状態変化
- 利点: 優雅で洗練された感じ、開始と終了が滑らか
慣性物理 (Inertia)
- 効果: ease-in (ゆっくり始まり、速く終わる)
- 適した用途:
- drillトランジション (拡大/縮小)
- slideトランジション (方向性のある移動)
- スクロール効果
- 利点: ユーザーが直接操作しているような感覚、物理的な慣性表現
ティップスとベストプラクティス
1. 基本はスプリング使用
ほとんどのUIアニメーションにはスプリング物理が最適です:
fade({ physics: { spring: config.default } })
2. 方向性のある遷移には慣性使用
ページが特定の方向に移動する場合、慣性物理がより自然です:
drill({ direction: 'enter', physics: { inertia: { acceleration: 20, resistance: 1.5 } } })
3. ダブルスプリングで優雅さを追加
重要なページ遷移にdoubleSpringを使用して、より洗練された感じを作ることができます:
fade({ physics: { spring: { ...config.gentle, doubleSpring: true } } })
4. プリセットから始める
カスタム値を設定する前に、まずプリセットを試してみてください:
// プリセットから開始
physics: { spring: config.gentle }
// 必要に応じて調整
physics: { spring: { ...config.gentle, stiffness: 250 } }
5. 一貫性を保つ
アプリ全体で似たようなアニメーションには同じ物理設定を使用してください:
const appPhysics = {
modal: { spring: config.stiff },
page: { spring: { ...config.gentle, doubleSpring: true } },
element: { spring: config.default }
};