railbird/react-native-vision-camera
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: Add real world example to ANIMATED docs

Browse Source
This commit is contained in:
Marc Rousavy 2021-05-25 18:44:39 +02:00 committed by GitHub
parent d8551792e9
commit 034db1a67b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/guides/ANIMATED.mdx
View File

@ -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 (`<PinchGestureHandler>`, `<PanGestureHandler>`), 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.
<br />
#### 🚀 Next section: [Camera Errors](errors)