Use SVG pip animation for ultra-wide-demo
This commit is contained in:
parent
0b3b5bd0f1
commit
012712da9d
@ -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
|
||||
|
||||
|
@ -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?
|
||||
|
@ -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
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
BIN
docs/static/img/frame.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 285 KiB |
BIN
docs/static/img/ultra-wide-demo.gif
vendored
BIN
docs/static/img/ultra-wide-demo.gif
vendored
Binary file not shown.
Before Width: | Height: | Size: 7.0 MiB |
Loading…
Reference in New Issue
Block a user