fix(player): 优化双击飘心轨迹
This commit is contained in:
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),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in new issue
Block a user