jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(player): 延长飘心并显示毫秒计时

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-26 18:48:12 +08:00
1 parent 84b24775d6
commit 810ca5bf9d
4 files changed
+165 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/player/widgets/player_double_tap_hearts.dart
+63 -5
View File
@@ -1,13 +1,14 @@
// Author: fruit.com.cn
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
const int _heartDurationMs = 680;
const int _heartDurationMs = 1500;
const double _heartPopPortion = 0.18;
const double _heartStartScale = 0.7;
const double _heartHoldPortion = 0.45;
const double _heartHoldPortion = 0.55;
const List<_HeartParticle> _hearts = [
_HeartParticle(
@@ -35,9 +36,14 @@ const List<_HeartParticle> _hearts = [
/// 双击点赞时，在点击位置飘出一小簇心。
class PlayerDoubleTapHeartBurst extends StatefulWidget {
const PlayerDoubleTapHeartBurst({super.key, required this.onCompleted});
const PlayerDoubleTapHeartBurst({
super.key,
required this.onCompleted,
this.origin = Offset.zero,
});
final VoidCallback onCompleted;
final Offset origin;
@override
State<PlayerDoubleTapHeartBurst> createState() =>
@@ -47,14 +53,24 @@ class PlayerDoubleTapHeartBurst extends StatefulWidget {
class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
final Stopwatch _lifetime = Stopwatch();
bool _completed = false;
@override
void initState() {
super.initState();
_lifetime.start();
final total = _hearts
.map((heart) => heart.delay + _heartDurationMs)
.reduce((left, right) => left > right ? left : right);
if (kDebugMode) {
debugPrint(
'[player] phase=heart-burst-start '
'id=${identityHashCode(this)} count=${_hearts.length} '
'configuredMs=$total at=${widget.origin.dx.toStringAsFixed(1)},'
'${widget.origin.dy.toStringAsFixed(1)}',
);
}
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: total),
@@ -65,11 +81,37 @@ class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
void _onStatus(AnimationStatus status) {
if (status != AnimationStatus.completed || _completed) return;
_completed = true;
if (kDebugMode) {
debugPrint(
'[player] phase=heart-burst-complete '
'id=${identityHashCode(this)} '
'configuredMs=${_controller.duration?.inMilliseconds ?? 0}',
);
}
widget.onCompleted();
}
@override
void dispose() {
if (kDebugMode) {
final elapsedMs = _completed
? _controller.duration?.inMilliseconds ?? 0
: _lifetime.elapsedMilliseconds;
debugPrint(
'[player] phase=heart-burst-dispose '
'id=${identityHashCode(this)} elapsedMs=$elapsedMs '
'completed=${_completed ? 1 : 0}',
);
if (!_completed) {
debugPrintStack(
maxFrames: 30,
label:
'[player] heart-burst-premature-dispose '
'id=${identityHashCode(this)} mount=tap-gesture-region',
);
}
}
_lifetime.stop();
_controller
..removeStatusListener(_onStatus)
..dispose();
@@ -86,10 +128,26 @@ class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
final elapsed =
_controller.value * _controller.duration!.inMilliseconds;
return Stack(
fit: StackFit.expand,
clipBehavior: Clip.none,
children: [
for (var index = 0; index < _hearts.length; index++)
_heart(_hearts[index], elapsed, index),
if (kDebugMode)
Positioned(
left: widget.origin.dx + 8,
top: widget.origin.dy,
child: IgnorePointer(
child: Text(
'${elapsed.round()}ms',
key: const Key('heart-burst-elapsed-debug'),
style: const TextStyle(
color: Colors.white60,
fontSize: 11,
),
),
),
),
],
);
},
@@ -113,8 +171,8 @@ class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
? 1.0
: 1 - ((progress - _heartHoldPortion) / (1 - _heartHoldPortion));
return Positioned(
left: heart.drift * move - heart.size / 2,
top: -heart.size / 2 - heart.travel * move,
left: widget.origin.dx + heart.drift * move - heart.size / 2,
top: widget.origin.dy - heart.size / 2 - heart.travel * move,
child: Opacity(
opacity: opacity.clamp(0.0, 1.0),
child: Transform.scale(
lib/pages/player/widgets/player_tap_gesture_region.dart
+45 -28
View File
@@ -2,6 +2,7 @@
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'player_double_tap_hearts.dart';
@@ -47,12 +48,18 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
int _downSerial = 0;
int _tapSeq = 0;
int _nextHeartBurstId = 0;
final List<({int id, Offset position})> _heartBursts = [];
final Map<int, OverlayEntry> _heartOverlayEntries = {};
@override
void dispose() {
_tapSeq++;
_singleTapTimer?.cancel();
for (final entry in _heartOverlayEntries.values.toList()) {
entry
..remove()
..dispose();
}
_heartOverlayEntries.clear();
super.dispose();
}
@@ -78,25 +85,6 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
onLongPressEnd: (_) => widget.onInteractionEnd(),
onLongPressCancel: widget.onInteractionEnd,
),
if (_heartBursts.isNotEmpty)
Positioned.fill(
child: IgnorePointer(
child: Stack(
clipBehavior: Clip.none,
children: [
for (final burst in _heartBursts)
Positioned(
left: burst.position.dx,
top: burst.position.dy - 10,
child: PlayerDoubleTapHeartBurst(
key: ValueKey(burst.id),
onCompleted: () => _removeHeartBurst(burst.id),
),
),
],
),
),
),
],
),
),
@@ -138,7 +126,7 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
void _handleTapUp(TapUpDetails details) {
final now = _now();
if (_doubleTapDown || _singleTapBlocked(now)) {
_handleDoubleTapLike(details.localPosition);
_handleDoubleTapLike(details.globalPosition);
return;
}
final serial = _downSerial;
@@ -156,19 +144,48 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
_singleTapTimer = pending;
}
void _handleDoubleTapLike(Offset position) {
void _handleDoubleTapLike(Offset globalPosition) {
_blockSingleTapUntil = _now().add(_singleTapDelay);
_cancelPendingSingleTap();
if (!widget.doubleTapEnabled || _likedThisPair) return;
_likedThisPair = true;
final id = _nextHeartBurstId++;
setState(() => _heartBursts.add((id: id, position: position)));
widget.onDoubleTapLike?.call(position);
_showHeartBurst(globalPosition);
widget.onDoubleTapLike?.call(globalPosition);
}
void _removeHeartBurst(int id) {
if (!mounted) return;
setState(() => _heartBursts.removeWhere((burst) => burst.id == id));
void _showHeartBurst(Offset globalPosition) {
final overlay = Overlay.maybeOf(context, rootOverlay: true);
if (overlay == null) return;
final overlayBox = overlay.context.findRenderObject();
final origin = overlayBox is RenderBox
? overlayBox.globalToLocal(globalPosition)
: globalPosition;
final id = _nextHeartBurstId++;
late final OverlayEntry entry;
entry = OverlayEntry(
builder: (context) => Positioned.fill(
child: IgnorePointer(
child: PlayerDoubleTapHeartBurst(
key: ValueKey('heart-overlay-$id'),
origin: origin,
onCompleted: () => _removeHeartOverlay(id),
),
),
),
);
_heartOverlayEntries[id] = entry;
overlay.insert(entry);
}
void _removeHeartOverlay(int id) {
final entry = _heartOverlayEntries.remove(id);
if (entry == null) return;
entry
..remove()
..dispose();
if (kDebugMode) {
debugPrint('[player] phase=heart-burst-entry-removed id=$id');
}
}
void _handleLongPressStart(LongPressStartDetails details, double width) {
test/player/double_tap_like_test.dart
+22 -3
View File
@@ -110,7 +110,7 @@ void main() {
expect(find.byKey(const Key('double-tap-heart-0')), findsOneWidget);
});
testWidgets('parent rebuild keeps the heart burst state alive', (
testWidgets('parent rebuild 30 times keeps the heart burst alive', (
tester,
) async {
final key = GlobalKey<_HarnessState>();
@@ -135,13 +135,24 @@ void main() {
final burstFinder = find.byType(PlayerDoubleTapHeartBurst);
final gestureState = tester.state(gestureFinder);
final burstState = tester.state(burstFinder);
var elapsedMs = 100;
key.currentState!.rebuild();
await tester.pump(const Duration(milliseconds: 100));
for (var index = 0; index < 30; index++) {
key.currentState!.rebuild();
await tester.pump(const Duration(milliseconds: 16));
elapsedMs += 16;
}
expect(tester.state(gestureFinder), same(gestureState));
expect(tester.state(burstFinder), same(burstState));
expect(find.byKey(const Key('double-tap-heart-0')), findsOneWidget);
while (burstFinder.evaluate().isNotEmpty && elapsedMs < 2000) {
await tester.pump(const Duration(milliseconds: 16));
elapsedMs += 16;
}
expect(burstFinder, findsNothing);
expect(elapsedMs, greaterThanOrEqualTo(1500));
});
testWidgets('heart burst is cleaned up when gesture region is disposed', (
@@ -166,6 +177,12 @@ void main() {
await tester.pump(const Duration(milliseconds: 1));
expect(find.byType(PlayerDoubleTapHeartBurst), findsOneWidget);
expect(
(tester.getCenter(find.byKey(const Key('double-tap-heart-0'))) -
tapPosition)
.distance,
lessThanOrEqualTo(1),
);
await tester.pumpWidget(const SizedBox.shrink());
await tester.pump();
@@ -200,6 +217,8 @@ void main() {
await tester.pump(const Duration(milliseconds: 1));
expect(find.byType(PlayerDoubleTapHeartBurst), findsNWidgets(2));
expect(find.byKey(const ValueKey('heart-overlay-0')), findsOneWidget);
expect(find.byKey(const ValueKey('heart-overlay-1')), findsOneWidget);
await tester.pumpWidget(const SizedBox.shrink());
await tester.pump();
expect(find.byType(PlayerDoubleTapHeartBurst), findsNothing);
test/player/player_double_tap_hearts_test.dart
+35 -4
View File
@@ -19,6 +19,11 @@ void main() {
expect(_size(tester, 0), 48);
expect(_size(tester, 1), 36);
expect(_size(tester, 2), 40);
final elapsedText = tester
.widget<Text>(find.byKey(const Key('heart-burst-elapsed-debug')))
.data!;
final elapsedMs = int.parse(elapsedText.replaceFirst('ms', ''));
expect(elapsedMs, inInclusiveRange(180, 220));
expect(
tester
.widgetList<Stack>(
@@ -32,7 +37,23 @@ void main() {
);
});
testWidgets('develop heart burst completes after about 770ms', (
testWidgets('heart burst keeps opacity then fades after 55 percent', (
tester,
) async {
await tester.pumpWidget(
const MaterialApp(
home: Scaffold(body: PlayerDoubleTapHeartBurst(onCompleted: _noop)),
),
);
await tester.pump(const Duration(milliseconds: 450));
expect(_opacity(tester, 0), closeTo(1, 1e-9));
await tester.pump(const Duration(milliseconds: 750));
expect(_opacity(tester, 0), lessThan(0.5));
});
testWidgets('develop heart burst completes after about 1590ms', (
tester,
) async {
var completed = false;
@@ -45,14 +66,14 @@ void main() {
),
);
while (!completed && elapsedMs < 1200) {
while (!completed && elapsedMs < 2000) {
await tester.pump(const Duration(milliseconds: 16));
elapsedMs += 16;
}
expect(completed, isTrue);
expect(elapsedMs, greaterThanOrEqualTo(752));
expect(elapsedMs, lessThanOrEqualTo(800));
expect(elapsedMs, greaterThanOrEqualTo(1584));
expect(elapsedMs, lessThanOrEqualTo(1616));
});
}
@@ -60,4 +81,14 @@ double _size(WidgetTester tester, int index) {
return tester.widget<Icon>(find.byKey(Key('double-tap-heart-$index'))).size!;
}
double _opacity(WidgetTester tester, int index) {
final opacity = find
.ancestor(
of: find.byKey(Key('double-tap-heart-$index')),
matching: find.byType(Opacity),
)
.first;
return tester.widget<Opacity>(opacity).opacity;
}
void _noop() {}