Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): smoother animations in current image preview

Browse Source
This commit is contained in:
psychedelicious 2024-05-03 09:53:47 +10:00 committed by Kent Keirsey
parent 98664fc46f
commit 20e628297c
1 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
View File

@ -10,7 +10,6 @@ import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButto
import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors'; import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
import type { AnimationProps } from 'framer-motion'; import type { AnimationProps } from 'framer-motion';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import type { CSSProperties } from 'react';
import { memo, useCallback, useMemo, useRef, useState } from 'react'; import { memo, useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiImageBold } from 'react-icons/pi'; import { PiImageBold } from 'react-icons/pi';
@ -85,16 +84,40 @@ const CurrentImagePreview = () => {
dataTestId="image-preview" dataTestId="image-preview"
/> />
)} )}
{shouldShowImageDetails && imageDTO && ( <AnimatePresence>
<Box position="absolute" top="0" width="full" height="full" borderRadius="base" opacity={0.8}> {shouldShowImageDetails && imageDTO && (
<ImageMetadataViewer image={imageDTO} /> <Box
</Box> as={motion.div}
)} key="metadataViewer"
initial={initial}
animate={animateMetadata}
exit={exit}
position="absolute"
top={0}
width="full"
height="full"
borderRadius="base"
>
<ImageMetadataViewer image={imageDTO} />
</Box>
)}
</AnimatePresence>
<AnimatePresence> <AnimatePresence>
{shouldShowNextPrevButtons && imageDTO && ( {shouldShowNextPrevButtons && imageDTO && (
<motion.div key="nextPrevButtons" initial={initial} animate={animate} exit={exit} style={motionStyles}> <Box
as={motion.div}
key="nextPrevButtons"
initial={initial}
animate={animateArrows}
exit={exit}
position="absolute"
top={0}
width="full"
height="full"
pointerEvents="none"
>
<NextPrevImageButtons /> <NextPrevImageButtons />
</motion.div> </Box>
)} )}
</AnimatePresence> </AnimatePresence>
</Flex> </Flex>
@ -106,18 +129,15 @@ export default memo(CurrentImagePreview);
const initial: AnimationProps['initial'] = { const initial: AnimationProps['initial'] = {
opacity: 0, opacity: 0,
}; };
const animate: AnimationProps['animate'] = { const animateArrows: AnimationProps['animate'] = {
opacity: 1, opacity: 1,
transition: { duration: 0.07 }, transition: { duration: 0.07 },
}; };
const animateMetadata: AnimationProps['animate'] = {
opacity: 0.8,
transition: { duration: 0.07 },
};
const exit: AnimationProps['exit'] = { const exit: AnimationProps['exit'] = {
opacity: 0, opacity: 0,
transition: { duration: 0.07 }, transition: { duration: 0.07 },
}; };
const motionStyles: CSSProperties = {
position: 'absolute',
top: '0',
width: '100%',
height: '100%',
pointerEvents: 'none',
};