Improve animation

This commit is contained in:
2025-01-29 20:52:37 +08:00
parent 3e5ae0a39a
commit a3e758831b
2 changed files with 161 additions and 102 deletions

View File

@@ -20,6 +20,7 @@ class AppPageRoute<T> extends PageRoute<T> with _AppRouteTransitionMixin {
super.barrierDismissible = false, super.barrierDismissible = false,
this.enableIOSGesture = true, this.enableIOSGesture = true,
this.preventRebuild = true, this.preventRebuild = true,
this.isRoot = false,
}) { }) {
assert(opaque); assert(opaque);
} }
@@ -44,6 +45,9 @@ class AppPageRoute<T> extends PageRoute<T> with _AppRouteTransitionMixin {
@override @override
final bool preventRebuild; final bool preventRebuild;
@override
final bool isRoot;
static void updateBackButton() { static void updateBackButton() {
Future.delayed(const Duration(milliseconds: 300), () { Future.delayed(const Duration(milliseconds: 300), () {
StateController.findOrNull(tag: "back_button")?.update(); StateController.findOrNull(tag: "back_button")?.update();
@@ -77,6 +81,8 @@ mixin _AppRouteTransitionMixin<T> on PageRoute<T> {
Widget? _child; Widget? _child;
bool get isRoot;
@override @override
Widget buildPage( Widget buildPage(
BuildContext context, BuildContext context,
@@ -115,6 +121,22 @@ mixin _AppRouteTransitionMixin<T> on PageRoute<T> {
@override @override
Widget buildTransitions(BuildContext context, Animation<double> animation, Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) { Animation<double> secondaryAnimation, Widget child) {
if (isRoot) {
return EntrancePageTransition(
animation: CurvedAnimation(
parent: animation,
curve: FluentTheme.of(context).animationCurve,
),
child: enableIOSGesture && App.isIOS
? IOSBackGestureDetector(
gestureWidth: _kBackGestureWidth,
enabledCallback: () => _isPopGestureEnabled<T>(this),
onStartPopGesture: () => _startPopGesture(this),
child: child)
: child,
);
}
return DrillInPageTransition( return DrillInPageTransition(
animation: CurvedAnimation( animation: CurvedAnimation(
parent: animation, parent: animation,
@@ -388,3 +410,35 @@ class SideBarRoute<T> extends PopupRoute<T> {
return IOSBackGestureController(route.controller!, route.navigator!); return IOSBackGestureController(route.controller!, route.navigator!);
} }
} }
class EntrancePageTransition extends StatelessWidget {
/// Creates an entrance page transition
const EntrancePageTransition({
super.key,
required this.child,
required this.animation,
});
/// The widget to be animated
final Widget child;
/// The animation to drive this transition
final Animation<double> animation;
@override
Widget build(BuildContext context) {
return ColoredBox(
color: FluentTheme.of(context).micaBackgroundColor,
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 0.1),
end: Offset.zero,
).animate(animation),
child: FadeTransition(
opacity: animation,
child: child,
),
),
);
}
}

View File

@@ -209,8 +209,7 @@ class _MainPageState extends State<MainPage>
body: const SizedBox.shrink(), body: const SizedBox.shrink(),
), ),
PaneItem( PaneItem(
icon: icon: const Icon(MdIcons.collections_bookmark_outlined, size: 20),
const Icon(MdIcons.collections_bookmark_outlined, size: 20),
title: Text('Bookmarks'.tl), title: Text('Bookmarks'.tl),
body: const SizedBox.shrink(), body: const SizedBox.shrink(),
), ),
@@ -233,11 +232,12 @@ class _MainPageState extends State<MainPage>
child: Navigator( child: Navigator(
key: navigatorKey, key: navigatorKey,
onGenerateRoute: (settings) => AppPageRoute( onGenerateRoute: (settings) => AppPageRoute(
builder: (context) => isRoot: true,
pageBuilders.elementAtOrNull(index)!(), builder: (context) => pageBuilders.elementAtOrNull(index)!(),
),
),
), ),
), ),
)),
); );
} }
@@ -263,7 +263,12 @@ class _MainPageState extends State<MainPage>
child: Text("Invalid Page: $index"), child: Text("Invalid Page: $index"),
); );
navigatorKey.currentState!.pushAndRemoveUntil( navigatorKey.currentState!.pushAndRemoveUntil(
AppPageRoute(builder: (context) => page()), (route) => false); AppPageRoute(
builder: (context) => page(),
isRoot: true,
),
(route) => false,
);
} }
NavigationAppBar buildAppBar( NavigationAppBar buildAppBar(