Extract a function
This commit is contained in:
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user