fast_animation 1.0.0
fast_animation: ^1.0.0 copied to clipboard
Supercharge your Flutter animations! Zero-overhead optimization with auto RepaintBoundary, smart frame skipping, and instant performance gains. Drop-in replacement for standard animation widgets.
🚀 Fast Animation #
Flutterアニメーションを劇的に高速化・軽量化
Drop-in replacement for standard animation widgets with zero overhead
⚡ なぜ Fast Animation? #
| 問題 | Fast Animation の解決策 |
|---|---|
| 🔴 アニメーションでUIがカクつく | ✅ RepaintBoundary自動適用で再描画範囲を限定 |
| 🔴 低スペック端末で動作が重い | ✅ スマートフレームスキップで自動最適化 |
| 🔴 透明度0でも描画処理が走る | ✅ 値の最適化で不要なウィジェットをスキップ |
| 🔴 AnimationControllerのボイラープレート | ✅ FastAnimationMixinで劇的に簡略化 |
| 🔴 アクセシビリティ対応が面倒 | ✅ グローバル設定で一括アニメーション無効化 |
📊 他ライブラリとの比較 #
| 機能 | fast_animation | flutter_animate | simple_animations | animations (公式) |
|---|---|---|---|---|
| パフォーマンス最適化 | ✅ 自動最適化 | ❌ 手動 | ❌ 手動 | ❌ 手動 |
| RepaintBoundary自動適用 | ✅ | ❌ | ❌ | ❌ |
| フレームスキップ | ✅ 自動 | ❌ | ❌ | ❌ |
| 値最適化 (opacity=0でスキップ等) | ✅ | ❌ | ❌ | ❌ |
| 標準ウィジェット互換 | ✅ Drop-in | ❌ 独自API | ❌ 独自API | ❌ 独自API |
| 学習コスト | 🟢 低い | 🟡 中 | 🟡 中 | 🟢 低い |
| 依存関係 | 🟢 flutterのみ | 🟡 flutter_shaders | 🟢 flutterのみ | �� flutterのみ |
| アクセシビリティ対応 | ✅ グローバル設定 | ❌ 手動 | ❌ 手動 | ❌ 手動 |
🎯 Fast Animation が選ばれる理由 #
他のライブラリ: 綺麗なアニメーションを「作る」ことに特化
Fast Animation: アニメーションを「速く」することに特化
💡 使い分け: 複雑なアニメーション演出には
flutter_animate、パフォーマンス重視にはfast_animationを使用。両方組み合わせることも可能!
📦 インストール #
dependencies:
fast_animation: ^1.0.0
flutter pub get
🎮 使い方 #
基本的な使い方(既存コードからの移行が超簡単!) #
import 'package:fast_animation/fast_animation.dart';
// Before (標準のFlutter)
FadeTransition(opacity: _animation, child: MyWidget())
// After (Fast Animation) - 名前を変えるだけ!
FastFadeTransition(opacity: _animation, child: MyWidget())
🔧 グローバル設定(アプリ起動時に一度だけ) #
void main() {
FastAnimationConfig.instance.configure(
animationsEnabled: true, // false: 全アニメーション無効(アクセシビリティ)
autoRepaintBoundary: true, // RepaintBoundary自動適用
enableFrameSkipping: false, // 低スペック端末で自動フレームスキップ
defaultDurationMs: 300, // デフォルトのアニメーション時間
);
runApp(MyApp());
}
💪 FastAnimationMixin(ボイラープレート削減) #
// Before: 大量のボイラープレートコード
class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
// After: シンプル!
class _MyWidgetState extends State<MyWidget>
with TickerProviderStateMixin, FastAnimationMixin {
@override
void initState() {
super.initState();
animationController.forward(); // 自動的に最適化されたコントローラーが利用可能
}
}
⚡ 軽量カーブ(計算コスト削減) #
// 標準のCurvesより軽量な計算
FastCurves.fastEaseIn // t²
FastCurves.fastEaseOut // 1-(1-t)²
FastCurves.fastEaseInOut // 滑らかな加減速
FastCurves.snap // 即座に終了値に(アニメーションなし)
🎬 提供ウィジェット一覧 #
// 明示的アニメーション(AnimationController使用)
FastFadeTransition(opacity: animation, child: widget)
FastScaleTransition(scale: animation, child: widget)
FastSlideTransition(position: animation, child: widget)
FastRotationTransition(turns: animation, child: widget)
// 暗黙的アニメーション(値の変更で自動アニメーション)
FastAnimatedOpacity(opacity: 1.0, duration: Duration(ms: 300), child: widget)
FastAnimatedContainer(duration: Duration(ms: 300), color: Colors.blue, child: widget)
FastAnimatedSwitcher(duration: Duration(ms: 300), child: widget)
// 特殊なアニメーション
FastDirectionalSlide(animation: anim, direction: SlideDirection.left, child: widget)
FastStaggeredAnimation(index: 0, totalItems: 10, child: widget)
FastVisibility(visible: true, child: widget)
🔬 最適化の仕組み #
1. RepaintBoundary自動適用 #
// アニメーションするウィジェットを分離
// → 親ウィジェットの再描画を防止
// → 描画パフォーマンス大幅向上
2. 値の最適化 #
// opacity = 0 → SizedBox.shrink() を返す(描画コスト0)
// opacity = 1 → Opacityウィジェットをスキップ
// scale = 1.0 → Transformウィジェットをスキップ
3. フレームスキップ #
// フレームレートが低下した場合
// → 自動的にフレームをスキップ
// → アニメーションの滑らかさを維持
�� 対応プラットフォーム #
| Platform | Support |
|---|---|
| Android | ✅ |
| iOS | ✅ |
| Web | ✅ |
| macOS | ✅ |
| Windows | ✅ |
| Linux | ✅ |
🤝 Contributing #
Issue報告やPull Requestを歓迎します!
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
📄 License #
MIT License - 詳細は LICENSE を参照
Made with ❤️ by Synapse8891
⭐ Star this repo if you find it useful! ⭐