Use SVG pip animation for ultra-wide-demo

This commit is contained in:
Marc Rousavy 2021-03-04 16:50:19 +01:00
parent 0b3b5bd0f1
commit 012712da9d
6 changed files with 12 additions and 10 deletions

View File

@ -5,9 +5,9 @@ sidebar_label: Zooming with Reanimated
---
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="300" style={{ float: 'right' }}>
<image href="https://cuvent.github.io/react-native-vision-camera/img/ultra-wide-demo.gif" height="300" width="150" />
<image href="https://i.pinimg.com/originals/15/d4/90/15d4903ffd54f3ad76007ffae8722fc5.png" height="300" width="150" />
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href="../img/demo.gif" x="18" y="33" width="247" height="469" />
<image href="../img/frame.png" width="283" height="535" />
</svg>
</div>
@ -15,11 +15,7 @@ sidebar_label: Zooming with Reanimated
Often you'd want to animate specific props in the Camera. For example, if you'd want to create a custom zoom gesture, you can smoothly animate the Camera's `zoom` property.
:::note
The `<Camera>` component does provide a natively implemented zoom gesture which you can enable with the `enableZoomGesture={true}` prop.
This does not require any additional work, but if you want to setup a custom gesture, such as the one in Snapchat or Instagram where you move up your finger while recording, continue reading.
:::
Note: The `<Camera>` component does provide a natively implemented zoom gesture which you can enable with the `enableZoomGesture={true}` prop. This does not require any additional work, but if you want to setup a custom gesture, such as the one in Snapchat or Instagram where you move up your finger while recording, continue reading.
### Installing reanimated

View File

@ -5,7 +5,10 @@ sidebar_label: Camera Devices
---
<div>
<img align="right" width="35%" src="../img/ultra-wide-demo.gif" />
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href="../img/demo.gif" x="18" y="33" width="247" height="469" />
<image href="../img/frame.png" width="283" height="535" />
</svg>
</div>
### What are camera devices?

View File

@ -10,7 +10,10 @@ FRAME PROCESSORS ARE STILL WORK IN PROGRESS - SEE [#2](https://github.com/cuvent
<!-- TODO: Demo of QR code scanning or smth -->
<div>
<img align="right" width="35%" src="../img/ultra-wide-demo.gif" />
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href="../img/demo.gif" x="18" y="33" width="247" height="469" />
<image href="../img/frame.png" width="283" height="535" />
</svg>
</div>
### What are frame processors?

BIN
docs/static/img/demo.gif vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
docs/static/img/frame.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 285 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 MiB