Give interpolateFromThumbnail control over style

This commit is contained in:
Dan Abramov
2024-11-02 19:09:50 +00:00
parent 95615d47f6
commit 394aadd14e
+7 -8
View File
@@ -122,17 +122,12 @@ function ImageViewing({
} }
} }
if (image.thumbRect && image.dimensions) { if (image.thumbRect && image.dimensions) {
const interpolatedTransform = interpolateTransform( return interpolateFromThumbnail(
openProgress.value, openProgress.value,
image.thumbRect, image.thumbRect,
SCREEN, SCREEN,
image.dimensions, image.dimensions,
) )
return {
transform: interpolatedTransform,
width,
height,
}
} }
return { return {
transform: [], transform: [],
@@ -344,7 +339,7 @@ function LightboxFooter({
) )
} }
function interpolateTransform( function interpolateFromThumbnail(
progress: number, progress: number,
thumbnailDims: { thumbnailDims: {
pageX: number pageX: number
@@ -383,7 +378,11 @@ function interpolateTransform(
const translateX = interpolate(progress, [0, 1], [initialTranslateX, 0]) const translateX = interpolate(progress, [0, 1], [initialTranslateX, 0])
const translateY = interpolate(progress, [0, 1], [initialTranslateY, 0]) const translateY = interpolate(progress, [0, 1], [initialTranslateY, 0])
const scale = interpolate(progress, [0, 1], [initialScale, 1]) const scale = interpolate(progress, [0, 1], [initialScale, 1])
return [{translateX}, {translateY}, {scale}] return {
transform: [{translateX}, {translateY}, {scale}],
width: finalWidth,
height: finalHeight,
}
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({