viewer: changed multipage overlay shading

This commit is contained in:
Thibault Deckers 2021-02-04 18:26:14 +09:00
parent 8fa3f18aef
commit b1fc6c2460
4 changed files with 55 additions and 84 deletions

View file

@ -30,10 +30,11 @@ class Durations {
static const filterRowExpandAnimation = Duration(milliseconds: 300); static const filterRowExpandAnimation = Duration(milliseconds: 300);
// viewer animations // viewer animations
static const viewerPageAnimation = Duration(milliseconds: 300); static const viewerVerticalPageScrollAnimation = Duration(milliseconds: 300);
static const viewerOverlayAnimation = Duration(milliseconds: 200); static const viewerOverlayAnimation = Duration(milliseconds: 200);
static const viewerOverlayChangeAnimation = Duration(milliseconds: 150); static const viewerOverlayChangeAnimation = Duration(milliseconds: 150);
static const viewerOverlayPageChooserAnimation = Duration(milliseconds: 200); static const viewerOverlayPageScrollAnimation = Duration(milliseconds: 200);
static const viewerOverlayPageShadeAnimation = Duration(milliseconds: 150);
// info animations // info animations
static const mapStyleSwitchAnimation = Duration(milliseconds: 300); static const mapStyleSwitchAnimation = Duration(milliseconds: 300);

View file

@ -358,7 +358,7 @@ class _EntryViewerStackState extends State<EntryViewerStack> with SingleTickerPr
Future<void> _goToVerticalPage(int page) { Future<void> _goToVerticalPage(int page) {
return _verticalPager.animateToPage( return _verticalPager.animateToPage(
page, page,
duration: Durations.viewerPageAnimation, duration: Durations.viewerVerticalPageScrollAnimation,
curve: Curves.easeInOut, curve: Curves.easeInOut,
); );
} }

View file

@ -107,7 +107,7 @@ class _InfoPageState extends State<InfoPage> {
BackUpNotification().dispatch(context); BackUpNotification().dispatch(context);
_scrollController.animateTo( _scrollController.animateTo(
0, 0,
duration: Durations.viewerPageAnimation, duration: Durations.viewerVerticalPageScrollAnimation,
curve: Curves.easeInOut, curve: Curves.easeInOut,
); );
} }

View file

@ -79,13 +79,6 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
final marginWidth = max(0, (availableWidth - extent) / 2 - separatorWidth); final marginWidth = max(0, (availableWidth - extent) / 2 - separatorWidth);
final horizontalMargin = SizedBox(width: marginWidth); final horizontalMargin = SizedBox(width: marginWidth);
final separator = SizedBox(width: separatorWidth); final separator = SizedBox(width: separatorWidth);
final shade = IgnorePointer(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black38,
),
),
);
return FutureBuilder<MultiPageInfo>( return FutureBuilder<MultiPageInfo>(
future: controller.info, future: controller.info,
@ -93,13 +86,7 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
final multiPageInfo = snapshot.data; final multiPageInfo = snapshot.data;
if ((multiPageInfo?.pageCount ?? 0) <= 1) return SizedBox(); if ((multiPageInfo?.pageCount ?? 0) <= 1) return SizedBox();
if (multiPageInfo.uri != mainEntry.uri) return SizedBox(); if (multiPageInfo.uri != mainEntry.uri) return SizedBox();
return Container( return SizedBox(
height: extent + separatorWidth * 2,
child: Stack(
children: [
Positioned(
top: separatorWidth,
width: availableWidth,
height: extent, height: extent,
child: ListView.separated( child: ListView.separated(
key: ValueKey(mainEntry), key: ValueKey(mainEntry),
@ -113,13 +100,15 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
final page = index - 1; final page = index - 1;
final pageEntry = mainEntry.getPageEntry(multiPageInfo.getByIndex(page)); final pageEntry = mainEntry.getPageEntry(multiPageInfo.getByIndex(page));
return GestureDetector( return Stack(
children: [
GestureDetector(
onTap: () async { onTap: () async {
_syncScroll = false; _syncScroll = false;
controller.page = page; controller.page = page;
await _scrollController.animateTo( await _scrollController.animateTo(
pageToScrollOffset(page), pageToScrollOffset(page),
duration: Durations.viewerOverlayPageChooserAnimation, duration: Durations.viewerOverlayPageScrollAnimation,
curve: Curves.easeOutCubic, curve: Curves.easeOutCubic,
); );
_syncScroll = true; _syncScroll = true;
@ -134,40 +123,21 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
selectable: false, selectable: false,
highlightable: false, highlightable: false,
), ),
),
IgnorePointer(
child: AnimatedContainer(
color: controller.page == page ? Colors.transparent : Colors.black45,
width: extent,
height: extent,
duration: Durations.viewerOverlayPageShadeAnimation,
),
)
],
); );
}, },
separatorBuilder: (context, index) => separator, separatorBuilder: (context, index) => separator,
itemCount: multiPageInfo.pageCount + 2, itemCount: multiPageInfo.pageCount + 2,
), ),
),
Positioned(
left: 0,
top: separatorWidth,
width: marginWidth + separatorWidth,
height: extent,
child: shade,
),
Positioned(
top: separatorWidth,
right: 0,
width: marginWidth + separatorWidth,
height: extent,
child: shade,
),
Positioned(
top: 0,
width: availableWidth,
height: separatorWidth,
child: shade,
),
Positioned(
bottom: 0,
width: availableWidth,
height: separatorWidth,
child: shade,
),
],
),
); );
}, },
); );