feat: 为划转页面切换按钮添加旋转动画
- 添加 180° 旋转动画效果 - 使用 CurvedAnimation 实现平滑过渡 - 动画时长 300ms,使用 easeInOut 曲线 - 提升用户体验,交互更流畅自然
This commit is contained in:
@@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user