feat: 为划转页面切换按钮添加旋转动画

- 添加 180° 旋转动画效果
- 使用 CurvedAnimation 实现平滑过渡
- 动画时长 300ms,使用 easeInOut 曲线
- 提升用户体验,交互更流畅自然
This commit is contained in:
2026-03-30 11:41:37 +08:00
parent a3a2ae76fc
commit 9920a29261
84 changed files with 20138 additions and 20076 deletions

View File

@@ -18,14 +18,29 @@ class TransferPage extends StatefulWidget {
State<TransferPage> createState() => _TransferPageState();
}
class _TransferPageState extends State<TransferPage> {
class _TransferPageState extends State<TransferPage> with SingleTickerProviderStateMixin {
final _amountController = TextEditingController();
int _direction = 1; // 1: 资金→交易, 2: 交易→资金
bool _isLoading = false;
late AnimationController _rotationController;
late Animation<double> _rotationAnimation;
@override
void initState() {
super.initState();
// 初始化旋转动画
_rotationController = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
_rotationAnimation = Tween<double>(
begin: 0,
end: 0.5, // 180度 = 0.5 圈
).animate(CurvedAnimation(
parent: _rotationController,
curve: Curves.easeInOut,
));
WidgetsBinding.instance.addPostFrameCallback((_) {
context.read<AssetProvider>().refreshAll(force: true);
});
@@ -34,6 +49,7 @@ class _TransferPageState extends State<TransferPage> {
@override
void dispose() {
_amountController.dispose();
_rotationController.dispose();
super.dispose();
}
@@ -128,6 +144,19 @@ class _TransferPageState extends State<TransferPage> {
_amountController.text = amount.toStringAsFixed(8).replaceAll(RegExp(r'\.?0+$'), '');
}
/// 切换方向并触发旋转动画
void _toggleDirection() {
setState(() {
_direction = _direction == 1 ? 2 : 1;
});
// 触发旋转动画
if (_rotationController.status == AnimationStatus.completed) {
_rotationController.reset();
}
_rotationController.forward();
}
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
@@ -169,24 +198,27 @@ class _TransferPageState extends State<TransferPage> {
// 方向切换按钮
GestureDetector(
onTap: () => setState(() => _direction = _direction == 1 ? 2 : 1),
child: Container(
margin: EdgeInsets.symmetric(vertical: AppSpacing.sm),
padding: EdgeInsets.all(AppSpacing.sm + AppSpacing.xs),
decoration: BoxDecoration(
color: colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: colorScheme.primary.withOpacity(0.3),
blurRadius: 8,
),
],
),
child: Icon(
Icons.swap_vert,
color: colorScheme.onPrimary,
size: 22,
onTap: _toggleDirection,
child: RotationTransition(
turns: _rotationAnimation,
child: Container(
margin: EdgeInsets.symmetric(vertical: AppSpacing.sm),
padding: EdgeInsets.all(AppSpacing.sm + AppSpacing.xs),
decoration: BoxDecoration(
color: colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: colorScheme.primary.withOpacity(0.3),
blurRadius: 8,
),
],
),
child: Icon(
Icons.swap_vert,
color: colorScheme.onPrimary,
size: 22,
),
),
),
),