Combine two functions
This commit is contained in:
@@ -100,17 +100,17 @@ function ImageViewing({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
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 (thumbDims) {
|
||||||
const interpolatedTransform = interpolateTransform(
|
const interpolatedTransform = interpolateTransform(
|
||||||
openProgress.value,
|
openProgress.value,
|
||||||
initialTransform,
|
thumbDims,
|
||||||
|
SCREEN,
|
||||||
)
|
)
|
||||||
return {
|
return {
|
||||||
transform: interpolatedTransform,
|
transform: interpolatedTransform,
|
||||||
@@ -315,61 +315,30 @@ function LightboxFooter({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function calculateInitialTransform(
|
|
||||||
screenSize: {width: number; height: number},
|
|
||||||
thumbnailPlacement:
|
|
||||||
| {
|
|
||||||
pageX: number
|
|
||||||
width: number
|
|
||||||
pageY: number
|
|
||||||
height: number
|
|
||||||
}
|
|
||||||
| null
|
|
||||||
| undefined,
|
|
||||||
) {
|
|
||||||
if (!thumbnailPlacement) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
const scale = thumbnailPlacement.width / screenSize.width
|
|
||||||
const screenCenterX = screenSize.width / 2
|
|
||||||
const screenCenterY = screenSize.height / 2
|
|
||||||
const thumbnailCenterX =
|
|
||||||
thumbnailPlacement.pageX + thumbnailPlacement.width / 2
|
|
||||||
const thumbnailCenterY =
|
|
||||||
thumbnailPlacement.pageY + thumbnailPlacement.height / 2
|
|
||||||
const translateX = (thumbnailCenterX - screenCenterX) / scale
|
|
||||||
const translateY = (thumbnailCenterY - screenCenterY) / scale
|
|
||||||
return {scale, translateX, translateY}
|
|
||||||
}
|
|
||||||
|
|
||||||
function interpolateTransform(
|
function interpolateTransform(
|
||||||
progress: number,
|
progress: number,
|
||||||
initialTransform: {
|
thumbnailDims: {
|
||||||
translateX: number
|
pageX: number
|
||||||
translateY: number
|
width: number
|
||||||
scale: number
|
pageY: number
|
||||||
|
height: number
|
||||||
},
|
},
|
||||||
|
screenSize: {width: number; height: number},
|
||||||
) {
|
) {
|
||||||
'worklet'
|
'worklet'
|
||||||
return [
|
const screenCenterX = screenSize.width / 2
|
||||||
{
|
const screenCenterY = screenSize.height / 2
|
||||||
scale: interpolate(progress, [0, 1], [initialTransform.scale, 1]),
|
const thumbnailCenterX = thumbnailDims.pageX + thumbnailDims.width / 2
|
||||||
},
|
const thumbnailCenterY = thumbnailDims.pageY + thumbnailDims.height / 2
|
||||||
{
|
|
||||||
translateX: interpolate(
|
const initialScale = thumbnailDims.width / screenSize.width
|
||||||
progress,
|
const initialTranslateX = (thumbnailCenterX - screenCenterX) / initialScale
|
||||||
[0, 1],
|
const initialTranslateY = (thumbnailCenterY - screenCenterY) / initialScale
|
||||||
[initialTransform.translateX, 0],
|
|
||||||
),
|
const scale = interpolate(progress, [0, 1], [initialScale, 1])
|
||||||
},
|
const translateX = interpolate(progress, [0, 1], [initialTranslateX, 0])
|
||||||
{
|
const translateY = interpolate(progress, [0, 1], [initialTranslateY, 0])
|
||||||
translateY: interpolate(
|
return [{scale}, {translateX}, {translateY}]
|
||||||
progress,
|
|
||||||
[0, 1],
|
|
||||||
[initialTransform.translateY, 0],
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
|
|||||||
Reference in New Issue
Block a user