acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Account for safe area in the animation

Browse Source
This commit is contained in:
Dan Abramov
2024-11-07 10:46:56 +00:00
parent 253954d66d
commit 1482b306c2
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/lightbox/ImageViewing/index.tsx
+14 -12
View File
@@ -335,17 +335,17 @@ function LightboxImage({
const {thumbRect, dimensions} = imageSrc const {thumbRect, dimensions} = imageSrc
const interpolation = useDerivedValue(() => { const interpolation = useDerivedValue(() => {
'worklet' 'worklet'
const screenSize = measure(safeAreaRef) const safeArea = measure(safeAreaRef)
if (!screenSize) { if (!safeArea) {
return {transform: [], width: 0, height: 0} return {transform: [], width: 0, height: 0}
} }
const finalWidth = screenSize.width const finalWidth = safeArea.width
const finalHeight = imageAspect ? screenSize.width / imageAspect : undefined const finalHeight = imageAspect ? safeArea.width / imageAspect : undefined
if (isActive && thumbRect && dimensions && openProgress.value < 1) { if (isActive && thumbRect && dimensions && openProgress.value < 1) {
return interpolateTransform( return interpolateTransform(
openProgress.value, openProgress.value,
thumbRect, thumbRect,
screenSize, safeArea,
dimensions, dimensions,
) )
} }
@@ -602,7 +602,7 @@ function interpolateTransform(
pageY: number pageY: number
height: number height: number
}, },
screenSize: {width: number; height: number}, safeArea: {width: number; height: number; x: number; y: number},
imageDims: {width: number; height: number}, imageDims: {width: number; height: number},
) { ) {
'worklet' 'worklet'
@@ -617,18 +617,20 @@ function interpolateTransform(
uncroppedInitialWidth = thumbnailDims.width uncroppedInitialWidth = thumbnailDims.width
uncroppedInitialHeight = thumbnailDims.width / imageAspect uncroppedInitialHeight = thumbnailDims.width / imageAspect
} }
const finalWidth = screenSize.width const finalWidth = safeArea.width
const finalHeight = screenSize.width / imageAspect const finalHeight = safeArea.width / imageAspect
const initialScale = Math.min( const initialScale = Math.min(
uncroppedInitialWidth / finalWidth, uncroppedInitialWidth / finalWidth,
uncroppedInitialHeight / finalHeight, uncroppedInitialHeight / finalHeight,
) )
const croppedFinalWidth = thumbnailDims.width / initialScale const croppedFinalWidth = thumbnailDims.width / initialScale
const croppedFinalHeight = thumbnailDims.height / initialScale const croppedFinalHeight = thumbnailDims.height / initialScale
const screenCenterX = screenSize.width / 2 const screenCenterX = safeArea.width / 2
const screenCenterY = screenSize.height / 2 const screenCenterY = safeArea.height / 2
const thumbnailCenterX = thumbnailDims.pageX + thumbnailDims.width / 2 const thumbnailSafeAreaX = thumbnailDims.pageX - safeArea.x
const thumbnailCenterY = thumbnailDims.pageY + thumbnailDims.height / 2 const thumbnailSafeAreaY = thumbnailDims.pageY - safeArea.y
const thumbnailCenterX = thumbnailSafeAreaX + thumbnailDims.width / 2
const thumbnailCenterY = thumbnailSafeAreaY + thumbnailDims.height / 2
const initialTranslateX = thumbnailCenterX - screenCenterX const initialTranslateX = thumbnailCenterX - screenCenterX
const initialTranslateY = thumbnailCenterY - screenCenterY const initialTranslateY = thumbnailCenterY - screenCenterY
const scale = interpolate(progress, [0, 1], [initialScale, 1]) const scale = interpolate(progress, [0, 1], [initialScale, 1])