fix(player): 优化双击飘心轨迹

This commit is contained in:
Zhou Weidong committed 2026-10-26 18:16:06 +08:00
1 parent bea50ab32f
commit 94b37ef00f
7 files changed
+89 -16

No files matched your search

@@ -130,6 +130,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
children: [ children: [
Positioned.fill( Positioned.fill(
child: PlayerTapGestureRegion( child: PlayerTapGestureRegion(
key: const ValueKey('home-feed-tap-gesture-region'),
gestureKey: const Key('home-feed-gesture'), gestureKey: const Key('home-feed-gesture'),
episodeId: widget.episode.id, episodeId: widget.episode.id,
enabled: !_scrubbing, enabled: !_scrubbing,
@@ -1,33 +1,34 @@
// Author: fruit.com.cn // Author: fruit.com.cn
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart'; import '../../../core/theme/app_colors.dart';
const int _heartDurationMs = 1300; const int _heartDurationMs = 1900;
const int _lastHeartDelayMs = 200; const int _lastHeartDelayMs = 260;
const double _heartPopPortion = 0.18; const double _heartPopPortion = 0.12;
const double _heartStartScale = 0.7; const double _heartStartScale = 0.7;
const double _heartHoldPortion = 0.65; const double _heartHoldPortion = 0.45;
const List<_HeartParticle> _hearts = [ const List<_HeartParticle> _hearts = [
_HeartParticle( _HeartParticle(
delay: 0, delay: 0,
travel: 175, travel: 120,
drift: 0, drift: 0,
size: 44, size: 44,
color: AppColors.doubleTapHeartRed, color: AppColors.doubleTapHeartRed,
), ),
_HeartParticle( _HeartParticle(
delay: 110, delay: 140,
travel: 150, travel: 120,
drift: -32, drift: -32,
size: 34, size: 34,
color: AppColors.doubleTapHeartPink, color: AppColors.doubleTapHeartPink,
), ),
_HeartParticle( _HeartParticle(
delay: _lastHeartDelayMs, delay: _lastHeartDelayMs,
travel: 165, travel: 120,
drift: 30, drift: 30,
size: 38, size: 38,
color: AppColors.doubleTapHeartRed, color: AppColors.doubleTapHeartRed,
@@ -36,7 +37,11 @@ const List<_HeartParticle> _hearts = [
/// 双击点赞时,在点击位置飘出一小簇心。 /// 双击点赞时,在点击位置飘出一小簇心。
class PlayerDoubleTapHeartBurst extends StatefulWidget { class PlayerDoubleTapHeartBurst extends StatefulWidget {
const PlayerDoubleTapHeartBurst({super.key, required this.onCompleted}); const PlayerDoubleTapHeartBurst({
super.key,
required this.burstId,
required this.onCompleted,
});
static const int particleCount = 3; static const int particleCount = 3;
static const int singleHeartDurationMs = _heartDurationMs; static const int singleHeartDurationMs = _heartDurationMs;
@@ -44,6 +49,7 @@ class PlayerDoubleTapHeartBurst extends StatefulWidget {
milliseconds: _lastHeartDelayMs + _heartDurationMs, milliseconds: _lastHeartDelayMs + _heartDurationMs,
); );
final int burstId;
final VoidCallback onCompleted; final VoidCallback onCompleted;
@override @override
@@ -54,11 +60,17 @@ class PlayerDoubleTapHeartBurst extends StatefulWidget {
class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst> class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
with SingleTickerProviderStateMixin { with SingleTickerProviderStateMixin {
late final AnimationController _controller; late final AnimationController _controller;
final Stopwatch _lifetime = Stopwatch();
bool _completed = false; bool _completed = false;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_lifetime.start();
if (kDebugMode) {
debugPrint('[player] phase=heart-burst-init id=${widget.burstId}');
debugPrint('[player] phase=heart-burst-start id=${widget.burstId}');
}
final total = _hearts final total = _hearts
.map((heart) => heart.delay + _heartDurationMs) .map((heart) => heart.delay + _heartDurationMs)
.reduce((left, right) => left > right ? left : right); .reduce((left, right) => left > right ? left : right);
@@ -72,11 +84,26 @@ class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
void _onStatus(AnimationStatus status) { void _onStatus(AnimationStatus status) {
if (status != AnimationStatus.completed || _completed) return; if (status != AnimationStatus.completed || _completed) return;
_completed = true; _completed = true;
if (kDebugMode) {
final elapsedMs = _controller.duration?.inMilliseconds ?? 0;
debugPrint(
'[player] phase=heart-burst-complete '
'id=${widget.burstId} elapsedMs=$elapsedMs',
);
}
widget.onCompleted(); widget.onCompleted();
} }
@override @override
void dispose() { void dispose() {
if (kDebugMode) {
debugPrint(
'[player] phase=heart-burst-dispose '
'id=${widget.burstId} elapsedMs=${_lifetime.elapsedMilliseconds} '
'completed=${_completed ? 1 : 0}',
);
}
_lifetime.stop();
_controller _controller
..removeStatusListener(_onStatus) ..removeStatusListener(_onStatus)
..dispose(); ..dispose();
@@ -111,14 +138,17 @@ class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
1.0, 1.0,
); );
if (progress <= 0) return const SizedBox.shrink(); if (progress <= 0) return const SizedBox.shrink();
final move = Curves.easeOutCubic.transform(progress); final move = Curves.easeOutSine.transform(progress);
final scale = progress < _heartPopPortion final scale = progress < _heartPopPortion
? _heartStartScale + ? _heartStartScale +
(1 - _heartStartScale) * (progress / _heartPopPortion) (1 - _heartStartScale) * (progress / _heartPopPortion)
: 1.0; : 1.0;
final opacity = progress < _heartHoldPortion final opacity = progress < _heartHoldPortion
? 1.0 ? 1.0
: 1 - ((progress - _heartHoldPortion) / (1 - _heartHoldPortion)); : 1 -
Curves.easeInOutSine.transform(
(progress - _heartHoldPortion) / (1 - _heartHoldPortion),
);
return Positioned( return Positioned(
left: heart.drift * move - heart.size / 2, left: heart.drift * move - heart.size / 2,
top: -heart.size / 2 - heart.travel * move, top: -heart.size / 2 - heart.travel * move,
@@ -59,6 +59,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
children: [ children: [
Positioned.fill( Positioned.fill(
child: PlayerTapGestureRegion( child: PlayerTapGestureRegion(
key: const ValueKey('player-tap-gesture-region'),
gestureKey: const Key('player-video-tap'), gestureKey: const Key('player-video-tap'),
episodeId: data.episode.id, episodeId: data.episode.id,
enabled: !scrubbing, enabled: !scrubbing,
@@ -93,6 +93,7 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
top: burst.position.dy - 10, top: burst.position.dy - 10,
child: PlayerDoubleTapHeartBurst( child: PlayerDoubleTapHeartBurst(
key: ValueKey(burst.id), key: ValueKey(burst.id),
burstId: burst.id,
onCompleted: () => _removeHeartBurst(burst.id), onCompleted: () => _removeHeartBurst(burst.id),
), ),
), ),
+39 -1
View File
@@ -6,6 +6,8 @@ import 'package:fruitshorts/core/data/services/interaction_controller.dart';
import 'package:fruitshorts/core/theme/app_theme.dart'; import 'package:fruitshorts/core/theme/app_theme.dart';
import 'package:fruitshorts/l10n/app_localizations.dart'; import 'package:fruitshorts/l10n/app_localizations.dart';
import 'package:fruitshorts/pages/player/widgets/home_feed_overlay.dart'; import 'package:fruitshorts/pages/player/widgets/home_feed_overlay.dart';
import 'package:fruitshorts/pages/player/widgets/player_double_tap_hearts.dart';
import 'package:fruitshorts/pages/player/widgets/player_tap_gesture_region.dart';
import '../support/fake_catalog.dart'; import '../support/fake_catalog.dart';
import '../support/fake_haptics.dart'; import '../support/fake_haptics.dart';
@@ -91,7 +93,7 @@ void main() {
await tester.tapAt(center); await tester.tapAt(center);
await tester.pump(); await tester.pump();
expect(repository.likeTargets, hasLength(1)); expect(repository.likeTargets, hasLength(1));
await tester.pump(const Duration(milliseconds: 1600)); await tester.pump(const Duration(milliseconds: 2300));
clock.advance(const Duration(milliseconds: 500)); clock.advance(const Duration(milliseconds: 500));
await tester.pump(const Duration(milliseconds: 500)); await tester.pump(const Duration(milliseconds: 500));
@@ -107,6 +109,40 @@ void main() {
expect(key.currentState!.pauseToggles, 0); expect(key.currentState!.pauseToggles, 0);
expect(find.byKey(const Key('double-tap-heart-0')), findsOneWidget); expect(find.byKey(const Key('double-tap-heart-0')), findsOneWidget);
}); });
testWidgets('parent rebuild keeps the heart burst state alive', (
tester,
) async {
final key = GlobalKey<_HarnessState>();
final clock = _TestClock();
await _pumpHarness(
tester,
FakeInteractionRepository(),
FakeHaptics(),
key,
clock,
);
final center = tester.getCenter(find.byKey(const Key('home-feed-gesture')));
await tester.tapAt(center);
clock.advance(const Duration(milliseconds: 100));
await tester.pump(const Duration(milliseconds: 100));
await tester.tapAt(center);
await tester.pump();
await tester.pump(const Duration(milliseconds: 100));
final gestureFinder = find.byType(PlayerTapGestureRegion);
final burstFinder = find.byType(PlayerDoubleTapHeartBurst);
final gestureState = tester.state(gestureFinder);
final burstState = tester.state(burstFinder);
key.currentState!.rebuild();
await tester.pump(const Duration(milliseconds: 100));
expect(tester.state(gestureFinder), same(gestureState));
expect(tester.state(burstFinder), same(burstState));
expect(find.byKey(const Key('double-tap-heart-0')), findsOneWidget);
});
} }
Future<void> _pumpHarness( Future<void> _pumpHarness(
@@ -155,6 +191,8 @@ class _HarnessState extends State<_Harness> {
); );
int pauseToggles = 0; int pauseToggles = 0;
void rebuild() => setState(() {});
Future<void> _like({bool likeOnly = false}) async { Future<void> _like({bool likeOnly = false}) async {
await widget.haptics.lightImpact(); await widget.haptics.lightImpact();
final episodeId = demoDramas.first.episodes.first.id; final episodeId = demoDramas.first.episodes.first.id;
@@ -10,7 +10,9 @@ void main() {
) async { ) async {
await tester.pumpWidget( await tester.pumpWidget(
const MaterialApp( const MaterialApp(
home: Scaffold(body: PlayerDoubleTapHeartBurst(onCompleted: _noop)), home: Scaffold(
body: PlayerDoubleTapHeartBurst(burstId: 1, onCompleted: _noop),
),
), ),
); );
await tester.pump(const Duration(milliseconds: 300)); await tester.pump(const Duration(milliseconds: 300));
@@ -33,10 +35,10 @@ void main() {
}); });
test('heart burst stays long and sparse', () { test('heart burst stays long and sparse', () {
expect(PlayerDoubleTapHeartBurst.singleHeartDurationMs, 1300); expect(PlayerDoubleTapHeartBurst.singleHeartDurationMs, 1900);
expect( expect(
PlayerDoubleTapHeartBurst.animationDuration, PlayerDoubleTapHeartBurst.animationDuration,
greaterThanOrEqualTo(const Duration(milliseconds: 1200)), greaterThanOrEqualTo(const Duration(milliseconds: 1800)),
); );
expect(PlayerDoubleTapHeartBurst.particleCount, lessThanOrEqualTo(4)); expect(PlayerDoubleTapHeartBurst.particleCount, lessThanOrEqualTo(4));
expect(PlayerDoubleTapHeartBurst.particleCount, 3); expect(PlayerDoubleTapHeartBurst.particleCount, 3);
+1 -1
View File
@@ -699,7 +699,7 @@ void main() {
AppColors.doubleTapHeartRed, AppColors.doubleTapHeartRed,
); );
await tester.pump(const Duration(milliseconds: 1600)); await tester.pump(const Duration(milliseconds: 2300));
expect(find.byKey(const Key('double-tap-heart-0')), findsNothing); expect(find.byKey(const Key('double-tap-heart-0')), findsNothing);
expect(logic.session.userWantsPlay, isTrue); expect(logic.session.userWantsPlay, isTrue);
}); });