Extract a function

This commit is contained in:
Dan Abramov
2024-10-31 13:14:59 +00:00
parent 4fb92ab059
commit 03679c4e51
+41 -27
View File
@@ -100,40 +100,24 @@ function ImageViewing({
} }
}) })
const initialTransform = calculateOverlayTransform(SCREEN, thumbDims) const initialTransform = calculateInitialTransform(SCREEN, thumbDims)
const activeImageStyle = useAnimatedStyle(() => { const activeImageStyle = useAnimatedStyle(() => {
if (openProgress.value === 1) { if (openProgress.value === 1) {
return { return {
transform: [{translateY: dismissSwipeTranslateY.value}], transform: [{translateY: dismissSwipeTranslateY.value}],
} }
} }
if (!initialTransform) { if (initialTransform) {
return {} const interpolatedTransform = interpolateTransform(
openProgress.value,
initialTransform,
)
return {
transform: interpolatedTransform,
}
} }
return { return {
transform: [ transform: [],
{
scale: interpolate(
openProgress.value,
[0, 1],
[initialTransform.scale, 1],
),
},
{
translateX: interpolate(
openProgress.value,
[0, 1],
[initialTransform.translateX, 0],
),
},
{
translateY: interpolate(
openProgress.value,
[0, 1],
[initialTransform.translateY, 0],
),
},
],
} }
}) })
@@ -331,7 +315,7 @@ function LightboxFooter({
) )
} }
function calculateOverlayTransform( function calculateInitialTransform(
screenSize: {width: number; height: number}, screenSize: {width: number; height: number},
thumbnailPlacement: thumbnailPlacement:
| { | {
@@ -358,6 +342,36 @@ function calculateOverlayTransform(
return {scale, translateX, translateY} return {scale, translateX, translateY}
} }
function interpolateTransform(
progress: number,
initialTransform: {
translateX: number
translateY: number
scale: number
},
) {
'worklet'
return [
{
scale: interpolate(progress, [0, 1], [initialTransform.scale, 1]),
},
{
translateX: interpolate(
progress,
[0, 1],
[initialTransform.translateX, 0],
),
},
{
translateY: interpolate(
progress,
[0, 1],
[initialTransform.translateY, 0],
),
},
]
}
const styles = StyleSheet.create({ const styles = StyleSheet.create({
screen: { screen: {
position: 'absolute', position: 'absolute',