mirror of
https://github.com/HChaZZY/PiliPlus.git
synced 2025-12-06 09:13:48 +08:00
opt: coin: show thunder
This commit is contained in:
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user