From 034db1a67bd525ac8ccac3eddb6786d425778232 Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Tue, 25 May 2021 18:44:39 +0200 Subject: [PATCH] docs: Add real world example to ANIMATED docs --- docs/docs/guides/ANIMATED.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/docs/guides/ANIMATED.mdx b/docs/docs/guides/ANIMATED.mdx index d84683e..4d8da24 100644 --- a/docs/docs/guides/ANIMATED.mdx +++ b/docs/docs/guides/ANIMATED.mdx @@ -85,6 +85,10 @@ export function App() { A Camera's `zoom` property is represented in a **logarithmic scale**. That means, increasing from `0` to `0.1` will appear to be a much larger offset than increasing from `0.9` to `1`. If you want to implement a zoom gesture (``, ``), try to flatten the `zoom` property to a **linear scale** by raising it **exponentially**. (`zoom.value ** 2`) +### Pinch-to-zoom + +The above example only demonstrates how to animate the `zoom` property. To actually implement pinch-to-zoom or pan-to-zoom, take a look at the [VisionCamera example app](https://github.com/cuvent/react-native-vision-camera/tree/main/example), the pinch-to-zoom gesture can be found [here](https://github.com/cuvent/react-native-vision-camera/blob/d8551792e97eaa6fa768f54059ffce054bf748d9/example/src/CameraPage.tsx#L162-L176), and the pan-to-zoom gesture can be found [here](https://github.com/cuvent/react-native-vision-camera/blob/d8551792e97eaa6fa768f54059ffce054bf748d9/example/src/views/CaptureButton.tsx#L185-L205). They implement a real world use-case, where the maximum zoom value is clamped to a realistic value, and the zoom responds very gracefully by using a logarithmic scale. +
#### 🚀 Next section: [Camera Errors](errors)