From 4fb92ab05918b38c3e1e8a1712e3b619731720fd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 31 Oct 2024 00:53:35 +0000
Subject: [PATCH] Animate transform

---
 src/view/com/lightbox/ImageViewing/index.tsx | 50 +++++++++++++++-----
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 1e9401f6ed..5775691c6e 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -18,7 +18,7 @@ import {
 } from 'react-native'
 import {Gesture} from 'react-native-gesture-handler'
 import PagerView from 'react-native-pager-view'
-import {MeasuredDimensions} from 'react-native-reanimated'
+import {interpolate, MeasuredDimensions} from 'react-native-reanimated'
 import Animated, {
   runOnJS,
   useAnimatedStyle,
@@ -100,8 +100,42 @@ function ImageViewing({
     }
   })
 
-  // TODO: Apply transform
-  // const initialTransform = calculateOverlayTransform(SCREEN, thumbDims)
+  const initialTransform = calculateOverlayTransform(SCREEN, thumbDims)
+  const activeImageStyle = useAnimatedStyle(() => {
+    if (openProgress.value === 1) {
+      return {
+        transform: [{translateY: dismissSwipeTranslateY.value}],
+      }
+    }
+    if (!initialTransform) {
+      return {}
+    }
+    return {
+      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],
+          ),
+        },
+      ],
+    }
+  })
 
   const dismissSwipePan = Gesture.Pan()
     .enabled(!isScaled)
@@ -111,7 +145,6 @@ function ImageViewing({
     .onUpdate(e => {
       'worklet'
       dismissSwipeTranslateY.value = e.translationY
-      console.log(dismissSwipeTranslateY.value)
     })
     .onEnd(e => {
       'worklet'
@@ -147,7 +180,7 @@ function ImageViewing({
   const backdropStyle = useAnimatedStyle(() => {
     let opacity
     if (openProgress.value < 1) {
-      opacity = openProgress.value
+      opacity = Math.sqrt(openProgress.value)
     } else {
       opacity =
         1 -
@@ -158,11 +191,6 @@ function ImageViewing({
     }
     return {opacity}
   })
-  const activeImageStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{translateY: dismissSwipeTranslateY.value}],
-    }
-  })
 
   if (!visible) {
     return null
@@ -388,7 +416,7 @@ const EnhancedImageViewing = (props: Props) => (
 
 function withClampedSpring(value: any) {
   'worklet'
-  return withSpring(value, {overshootClamping: true, stiffness: 300})
+  return withSpring(value, {overshootClamping: true, stiffness: 150})
 }
 
 export default EnhancedImageViewing