opt: coin: show thunder

This commit is contained in:
bggRGjQaUbCoE
2024-10-03 23:47:49 +08:00
parent c30aa46cc0
commit 7cc9d35783

View File

@@ -744,6 +744,15 @@ class _PayCoinsPageState extends State<PayCoinsPage>
late AnimationController _coinFadeController; late AnimationController _coinFadeController;
late AnimationController _boxAnimController; late AnimationController _boxAnimController;
final List _images = [
'assets/images/paycoins/ic_thunder_1.png',
'assets/images/paycoins/ic_thunder_2.png',
'assets/images/paycoins/ic_thunder_3.png',
];
late int _imageIndex = -1;
Timer? _timer;
bool get _showThunder => _imageIndex != -1 && _imageIndex != _images.length;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@@ -772,6 +781,7 @@ class _PayCoinsPageState extends State<PayCoinsPage>
@override @override
void dispose() { void dispose() {
_timer?.cancel();
_slide22Controller.dispose(); _slide22Controller.dispose();
_scale22Controller.dispose(); _scale22Controller.dispose();
_coinSlideController.dispose(); _coinSlideController.dispose();
@@ -803,186 +813,186 @@ class _PayCoinsPageState extends State<PayCoinsPage>
}); });
} }
Widget _buildBody(isV) => Column( Widget _buildBody(isV) => Stack(
mainAxisAlignment: MainAxisAlignment.end, alignment: Alignment.center,
children: [ children: [
Row( Visibility(
visible: _showThunder,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
child: Image.asset(_images[_showThunder ? _imageIndex : 0]),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [ children: [
Visibility( Row(
visible: !_isPaying, children: [
maintainSize: true, Visibility(
maintainAnimation: true, visible: !_isPaying,
maintainState: true, maintainSize: true,
child: GestureDetector( maintainAnimation: true,
onTap: _index == 0 maintainState: true,
? null child: GestureDetector(
: () { onTap: _index == 0
_onScroll(0); ? null
}, : () {
child: Padding( _onScroll(0);
padding: const EdgeInsets.only(left: 12), },
child: Image.asset( child: Padding(
width: 16, padding: const EdgeInsets.only(left: 12),
height: 28, child: Image.asset(
_index == 0 width: 16,
? 'assets/images/paycoins/ic_left_disable.png' height: 28,
: 'assets/images/paycoins/ic_left.png', _index == 0
? 'assets/images/paycoins/ic_left_disable.png'
: 'assets/images/paycoins/ic_left.png',
),
),
), ),
), ),
), Expanded(
), child: SizedBox(
Expanded( height: 100,
child: SizedBox( child: PageView.builder(
height: 100, itemCount: 2,
child: PageView.builder( controller: _controller,
itemCount: 2, onPageChanged: (index) => setState(() {
controller: _controller, _scale();
onPageChanged: (index) => setState(() { }),
_scale(); itemBuilder: (context, index) {
}), return ListenableBuilder(
itemBuilder: (context, index) { listenable: _controller,
return ListenableBuilder( builder: (context, child) {
listenable: _controller, double factor = index == 0 ? 1 : 0;
builder: (context, child) { if (_controller.position.hasContentDimensions) {
double factor = index == 0 ? 1 : 0; factor = 1 - (_controller.page! - index).abs();
if (_controller.position.hasContentDimensions) { }
factor = 1 - (_controller.page! - index).abs(); return Visibility(
} visible: !_isPaying || _index == index,
return Visibility( child: Center(
visible: !_isPaying || _index == index, child: SizedBox(
child: Center( height: 70 + (factor * 30),
child: SizedBox( width: 70 + (factor * 30),
height: 70 + (factor * 30), child: Stack(
width: 70 + (factor * 30), alignment: Alignment.center,
child: Stack( children: [
alignment: Alignment.center, SlideTransition(
children: [ position: _boxAnimController.drive(
SlideTransition( Tween(
position: _boxAnimController.drive( begin: const Offset(0.0, 0.0),
Tween( end: const Offset(0.0, -0.2),
begin: const Offset(0.0, 0.0), ),
end: const Offset(0.0, -0.2), ),
child: Image.asset(
'assets/images/paycoins/ic_pay_coins_box.png',
),
), ),
), SlideTransition(
child: Image.asset( position: _coinSlideController.drive(
'assets/images/paycoins/ic_pay_coins_box.png', Tween(
), begin: const Offset(0.0, 0.0),
end: const Offset(0.0, -2),
),
),
child: FadeTransition(
opacity: Tween<double>(
begin: 1, end: 0)
.animate(_coinFadeController),
child: Image.asset(
height: 35 + (factor * 15),
width: 35 + (factor * 15),
index == 0
? 'assets/images/paycoins/ic_coins_one.png'
: 'assets/images/paycoins/ic_coins_two.png',
),
),
),
],
), ),
SlideTransition( ),
position: _coinSlideController.drive(
Tween(
begin: const Offset(0.0, 0.0),
end: const Offset(0.0, -2),
),
),
child: FadeTransition(
opacity: Tween<double>(begin: 1, end: 0)
.animate(_coinFadeController),
child: Image.asset(
height: 35 + (factor * 15),
width: 35 + (factor * 15),
index == 0
? 'assets/images/paycoins/ic_coins_one.png'
: 'assets/images/paycoins/ic_coins_two.png',
),
),
),
],
), ),
), );
), },
); );
}, },
); ),
}, ),
), ),
), Visibility(
visible: !_isPaying,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
child: GestureDetector(
onTap: _index == 1
? null
: () {
_onScroll(1);
},
child: Padding(
padding: const EdgeInsets.only(right: 12),
child: Image.asset(
width: 16,
height: 28,
_index == 1
? 'assets/images/paycoins/ic_right_disable.png'
: 'assets/images/paycoins/ic_right.png',
),
),
),
),
],
), ),
Visibility( const SizedBox(height: 25),
visible: !_isPaying, GestureDetector(
maintainSize: true, behavior: HitTestBehavior.opaque,
maintainAnimation: true, onPanUpdate: _handlePanUpdate,
maintainState: true, child: SizedBox(
child: GestureDetector( width: double.infinity,
onTap: _index == 1 height: 140,
? null child: Center(
: () { child: GestureDetector(
_onScroll(1); onTap: _onPayCoin,
}, onPanUpdate: (e) => _handlePanUpdate(e, true),
child: Padding( child: ScaleTransition(
padding: const EdgeInsets.only(right: 12), scale: _scale22Controller.drive(
child: Image.asset( Tween(begin: 1, end: 1.2),
width: 16, ),
height: 28, child: SlideTransition(
_index == 1 position: _slide22Controller.drive(
? 'assets/images/paycoins/ic_right_disable.png' Tween(
: 'assets/images/paycoins/ic_right.png', begin: const Offset(0.0, 0.0),
end: const Offset(0.0, -0.2),
),
),
child: SizedBox(
width: 100,
height: 140,
child: Image.asset(
_index == 0
? 'assets/images/paycoins/ic_22_mario.png'
: 'assets/images/paycoins/ic_22_gun_sister.png',
),
),
),
),
), ),
), ),
), ),
), ),
SizedBox(
height:
(isV ? 50 : 0) + MediaQuery.of(context).padding.bottom),
], ],
), ),
const SizedBox(height: 25),
GestureDetector(
behavior: HitTestBehavior.opaque,
onPanUpdate: _handlePanUpdate,
child: SizedBox(
width: double.infinity,
height: 140,
child: Center(
child: GestureDetector(
onPanUpdate: (e) => _handlePanUpdate(e, true),
child: ScaleTransition(
scale: _scale22Controller.drive(
Tween(begin: 1, end: 1.2),
),
child: SlideTransition(
position: _slide22Controller.drive(
Tween(
begin: const Offset(0.0, 0.0),
end: const Offset(0.0, -0.2),
),
),
child: SizedBox(
width: 100,
height: 140,
child: Image.asset(
_index == 0
? 'assets/images/paycoins/ic_22_mario.png'
: 'assets/images/paycoins/ic_22_gun_sister.png',
),
),
),
),
),
),
),
),
SizedBox(
height: (isV ? 50 : 0) + MediaQuery.of(context).padding.bottom),
], ],
); );
void _handlePanUpdate(DragUpdateDetails e, [bool needV = false]) { void _handlePanUpdate(DragUpdateDetails e, [bool needV = false]) {
if (needV && e.delta.dy.abs() > max(2, e.delta.dx.abs())) { if (needV && e.delta.dy.abs() > max(2, e.delta.dx.abs())) {
if (e.delta.dy < 0) { if (e.delta.dy < 0) {
setState(() { _onPayCoin();
_isPaying = true;
});
_slide22Controller.forward().whenComplete(() {
_slide22Controller.reverse().whenComplete(() {
_boxAnimController.forward().whenComplete(() {
_boxAnimController.reverse();
});
_coinSlideController.forward().whenComplete(() {
_coinFadeController.forward().whenComplete(() {
Get.back();
widget.callback(_index + 1);
});
});
});
});
} }
} else if (e.delta.dx.abs() > max(2, e.delta.dy.abs())) { } else if (e.delta.dx.abs() > max(2, e.delta.dy.abs())) {
if (e.delta.dx > 0) { if (e.delta.dx > 0) {
@@ -998,4 +1008,35 @@ class _PayCoinsPageState extends State<PayCoinsPage>
} }
} }
} }
void _onPayCoin() {
if (_isPaying) return;
setState(() {
_isPaying = true;
});
_slide22Controller.forward().whenComplete(() {
_slide22Controller.reverse().whenComplete(() {
if (_index == 1) {
_timer ??= Timer.periodic(const Duration(milliseconds: 50 ~/ 3), (_) {
if (_imageIndex != _images.length) {
setState(() {
_imageIndex = _imageIndex + 1;
});
} else {
_timer?.cancel();
}
});
}
_boxAnimController.forward().whenComplete(() {
_boxAnimController.reverse();
});
_coinSlideController.forward().whenComplete(() {
_coinFadeController.forward().whenComplete(() {
Get.back();
widget.callback(_index + 1);
});
});
});
});
}
} }