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

Make wiggle animation

Browse Source
This commit is contained in:
Marc Rousavy 2021-02-19 19:54:30 +01:00
parent 0f50b51a1b
commit 84da659969
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/src/Media.tsx
View File

@ -9,6 +9,7 @@ import { PressableOpacity } from './views/PressableOpacity';
import IonIcon from 'react-native-vector-icons/Ionicons'; import IonIcon from 'react-native-vector-icons/Ionicons';
import { Alert } from 'react-native'; import { Alert } from 'react-native';
import CameraRoll from '@react-native-community/cameraroll'; import CameraRoll from '@react-native-community/cameraroll';
import { StatusBarBlurBackground } from './views/StatusBarBlurBackground';
interface MediaProps { interface MediaProps {
path: string, path: string,
@ -132,6 +133,8 @@ export const Media: NavigationFunctionComponent<MediaProps> = ({ componentId, ty
<ActivityIndicator color="white" /> <ActivityIndicator color="white" />
)} )}
</PressableOpacity> </PressableOpacity>
<StatusBarBlurBackground />
</View> </View>
); );
} }

33
example/src/views/CaptureButton.tsx
View File

@ -17,6 +17,7 @@ import Reanimated, {
withTiming, withTiming,
useAnimatedGestureHandler, useAnimatedGestureHandler,
useSharedValue, useSharedValue,
withRepeat,
} from "react-native-reanimated"; } from "react-native-reanimated";
import type { Camera, PhotoFile, TakePhotoOptions, TakeSnapshotOptions, VideoFile } from "react-native-vision-camera"; import type { Camera, PhotoFile, TakePhotoOptions, TakeSnapshotOptions, VideoFile } from "react-native-vision-camera";
import { CAPTURE_BUTTON_SIZE, SCREEN_HEIGHT, SCREEN_WIDTH, USE_SNAPSHOT_ON_ANDROID } from "./../Constants"; import { CAPTURE_BUTTON_SIZE, SCREEN_HEIGHT, SCREEN_WIDTH, USE_SNAPSHOT_ON_ANDROID } from "./../Constants";
@ -264,6 +265,26 @@ const _CaptureButton: React.FC<Props> = ({
); );
const buttonStyle = useAnimatedStyle( const buttonStyle = useAnimatedStyle(
() => { () => {
let scale: number;
if (enabled) {
if (isPressingButton.value) {
scale = withRepeat(withSpring(1, {
stiffness: 100,
damping: 1000,
}), -1, true);
} else {
scale = withSpring(0.9, {
stiffness: 500,
damping: 300,
});
}
} else {
scale = withSpring(0.6, {
stiffness: 500,
damping: 300,
});
}
return ({ return ({
opacity: withTiming(enabled ? 1 : 0.3, { opacity: withTiming(enabled ? 1 : 0.3, {
duration: 100, duration: 100,
@ -271,17 +292,7 @@ const _CaptureButton: React.FC<Props> = ({
}), }),
transform: [ transform: [
{ {
scale: withSpring( scale: scale
enabled
? isPressingButton.value
? 1
: 0.9
: 0.6,
{
stiffness: 500,
damping: 300,
}
),
}, },
], ],
}) })