Add simple image viewer pan decay

This commit is contained in:
xmflsct 2023-03-19 23:18:43 +01:00
parent 86e502afdd
commit 521d8f75fc
3 changed files with 53 additions and 2 deletions

View File

@ -0,0 +1,38 @@
diff --git a/src/zoom.tsx b/src/zoom.tsx
index 70ce1c8d6a43e711f06b93d1eda3b44a3ad9a659..cdc2713470f2d332b8bf3e9c97e38fd9b78281df 100644
--- a/src/zoom.tsx
+++ b/src/zoom.tsx
@@ -4,6 +4,7 @@ import Animated, {
useSharedValue,
useAnimatedStyle,
useDerivedValue,
+ withDecay,
withTiming,
cancelAnimation,
runOnJS,
@@ -120,11 +121,22 @@ export function Zoom(props: Props) {
}
}
})
- .onEnd(() => {
+ .onEnd((event) => {
if (isPinching.value || !isZoomed.value) return;
- panTranslateX.value = 0;
- panTranslateY.value = 0;
+ const maxTranslateX = (viewWidth.value / 2) * scale.value - viewWidth.value / 2;
+ const minTranslateX = -maxTranslateX;
+ translationX.value = withDecay({
+ velocity: event.velocityX,
+ clamp: [minTranslateX, maxTranslateX]
+ });
+
+ const maxTranslateY = (viewHeight.value / 2) * scale.value - viewHeight.value / 2;
+ const minTranslateY = -maxTranslateY;
+ translationY.value = withDecay({
+ velocity: event.velocityY,
+ clamp: [minTranslateY, maxTranslateY]
+ });
});
const pinch = Gesture.Pinch()

View File

@ -114,6 +114,7 @@
"expo-av@^13.0.2": "patch:expo-av@npm%3A13.0.2#./.yarn/patches/expo-av-npm-13.0.2-7a651776f1.patch",
"react-native-share-menu@^6.0.0": "patch:react-native-share-menu@npm%3A6.0.0#./.yarn/patches/react-native-share-menu-npm-6.0.0-f1094c3204.patch",
"@types/react-native-share-menu@^5.0.2": "patch:@types/react-native-share-menu@npm%3A5.0.2#./.yarn/patches/@types-react-native-share-menu-npm-5.0.2-373df17ecc.patch",
"react-native-ios-context-menu@^1.15.1": "patch:react-native-ios-context-menu@npm%3A1.15.1#./.yarn/patches/react-native-ios-context-menu-npm-1.15.1-0034bfa5ba.patch"
"react-native-ios-context-menu@^1.15.1": "patch:react-native-ios-context-menu@npm%3A1.15.1#./.yarn/patches/react-native-ios-context-menu-npm-1.15.1-0034bfa5ba.patch",
"react-native-reanimated-zoom@^0.3.3": "patch:react-native-reanimated-zoom@npm%3A0.3.3#./.yarn/patches/react-native-reanimated-zoom-npm-0.3.3-bbb8d84109.patch"
}
}

View File

@ -9950,7 +9950,7 @@ __metadata:
languageName: node
linkType: hard
"react-native-reanimated-zoom@npm:^0.3.3":
"react-native-reanimated-zoom@npm:0.3.3":
version: 0.3.3
resolution: "react-native-reanimated-zoom@npm:0.3.3"
peerDependencies:
@ -9962,6 +9962,18 @@ __metadata:
languageName: node
linkType: hard
"react-native-reanimated-zoom@patch:react-native-reanimated-zoom@npm%3A0.3.3#./.yarn/patches/react-native-reanimated-zoom-npm-0.3.3-bbb8d84109.patch::locator=tooot%40workspace%3A.":
version: 0.3.3
resolution: "react-native-reanimated-zoom@patch:react-native-reanimated-zoom@npm%3A0.3.3#./.yarn/patches/react-native-reanimated-zoom-npm-0.3.3-bbb8d84109.patch::version=0.3.3&hash=187ed4&locator=tooot%40workspace%3A."
peerDependencies:
react: "*"
react-native: "*"
react-native-gesture-handler: "*"
react-native-reanimated: "*"
checksum: b43e7db64ad15cdb964da44b313205164ae74ebcde6baf01f3852b8cd733078b90d4ada140c78fad33ac2ba70f4db5b1d8644018f6ff885bbb998d2dd0211b05
languageName: node
linkType: hard
"react-native-reanimated@npm:^3.0.2":
version: 3.0.2
resolution: "react-native-reanimated@npm:3.0.2"