From 31fb528998526bdb2784383c83529df869a8ce4f Mon Sep 17 00:00:00 2001 From: poe Date: Sun, 24 Sep 2023 15:49:20 +0900 Subject: [PATCH] feat: Replace Animation Library to Reanimated (#77) * feat: Replace Animation Library to Reanimated --------- Co-authored-by: Ovidiu Cristescu <55203625+LunatiqueCoder@users.noreply.github.com> --- package.json | 4 +- src/VideoPlayer.tsx | 4 +- src/components/BottomControls.tsx | 8 +- src/components/Loader/Loader.tsx | 34 ++----- src/components/Overlay.tsx | 12 +-- src/components/PlayPause/PlayPause.tsx | 6 +- src/components/Timer/styles.ts | 2 +- src/components/Title.tsx | 2 +- src/components/TopControls.tsx | 8 +- src/hooks/useAnimations.ts | 125 +++++++++---------------- src/types.ts | 16 +--- 11 files changed, 75 insertions(+), 146 deletions(-) diff --git a/package.json b/package.json index bbd8a73..2aefe98 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "dependencies": {}, "peerDependencies": { "react-native": ">=0.46.0", - "react-native-video": ">=2.0.0" + "react-native-video": ">=2.0.0", + "react-native-reanimated": "^2.12.0" }, "devDependencies": { "@react-native-community/eslint-config": "^3.0.1", @@ -42,6 +43,7 @@ "react-native": "npm:react-native-tvos@0.68.2-5", "react-native-builder-bob": "^0.18.2", "react-native-video": "^5.2.0", + "react-native-reanimated": "^2.12.0", "release-it": "^15.6.0", "typescript": "^4.6.2" }, diff --git a/src/VideoPlayer.tsx b/src/VideoPlayer.tsx index 1f46647..55fe18c 100644 --- a/src/VideoPlayer.tsx +++ b/src/VideoPlayer.tsx @@ -260,7 +260,7 @@ export const VideoPlayer = (props: VideoPlayerProps) => { }; const {animations, hideControlAnimation, showControlAnimation} = - useAnimations(loading, controlAnimationTiming); + useAnimations(controlAnimationTiming); const {clearControlTimeout, resetControlTimeout, setControlTimeout} = useControlTimeout({ @@ -412,7 +412,7 @@ export const VideoPlayer = (props: VideoPlayerProps) => { source={source} /> {loading ? ( - + ) : ( <> diff --git a/src/components/BottomControls.tsx b/src/components/BottomControls.tsx index 6d4dce3..cedcda6 100644 --- a/src/components/BottomControls.tsx +++ b/src/components/BottomControls.tsx @@ -1,11 +1,11 @@ import React, {Dispatch, SetStateAction} from 'react'; import { - Animated, ImageBackground, SafeAreaView, StyleSheet, GestureResponderHandlers, } from 'react-native'; +import Animated from 'react-native-reanimated'; import {Timer} from './Timer'; import {Title} from './Title'; import {NullControl} from './NullControl'; @@ -105,10 +105,8 @@ export const BottomControls = ({ ( - - - -); +export const Loader = ({}: LoaderProps) => { + return ( + + + + ); +}; diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index 77c51df..a2574bf 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -1,17 +1,11 @@ import React from 'react'; -import {Animated, StyleSheet} from 'react-native'; +import {StyleSheet} from 'react-native'; +import Animated from 'react-native-reanimated'; import type {VideoAnimations} from '../types'; export const Overlay = ({animations}: {animations: VideoAnimations}) => { return ( - + ); }; diff --git a/src/components/PlayPause/PlayPause.tsx b/src/components/PlayPause/PlayPause.tsx index eb01dc2..451136a 100644 --- a/src/components/PlayPause/PlayPause.tsx +++ b/src/components/PlayPause/PlayPause.tsx @@ -1,5 +1,6 @@ import React, {createRef} from 'react'; -import {Animated, Image, Platform, TouchableHighlight} from 'react-native'; +import {Image, Platform, TouchableHighlight} from 'react-native'; +import Animated from 'react-native-reanimated'; import {Control} from '../Control'; import {NullControl} from '../NullControl'; import type {VideoAnimations} from '../../types'; @@ -38,7 +39,6 @@ export const PlayPause = ({ let source = paused ? play : pause; const animatedStyles = { - opacity: animations.controlsOpacity, zIndex: showControls ? 99999 : 0, }; @@ -49,7 +49,7 @@ export const PlayPause = ({ return ( + style={[styles.container, animatedStyles, animations.controlsOpacity]}> {!disableSeekButtons ? ( { - const bottomControlMarginBottom = useRef(new Animated.Value(0)).current; - const controlsOpacity = useRef(new Animated.Value(1)).current; - const topControlMarginTop = useRef(new Animated.Value(0)).current; - const videoOpacity = useRef(new Animated.Value(-100)).current; - const loaderRotateAnim = useRef(new Animated.Value(0)).current; +export const useAnimations = (controlAnimationTiming: number) => { + const bottomControlMarginBottom = useSharedValue(0); + const controlsOpacity = useSharedValue(1); + const topControlMarginTop = useSharedValue(0); const animations = { - bottomControl: { - marginBottom: bottomControlMarginBottom, - }, - topControl: { - marginTop: topControlMarginTop, - }, - video: { - opacity: videoOpacity, - }, - loader: { - rotate: loaderRotateAnim, - MAX_VALUE: 360, - }, - controlsOpacity, + bottomControl: useAnimatedStyle(() => { + return { + transform: [{translateY: bottomControlMarginBottom.value}], + }; + }), + topControl: useAnimatedStyle(() => { + return { + transform: [{translateY: topControlMarginTop.value}], + }; + }), + controlsOpacity: useAnimatedStyle(() => { + return { + opacity: controlsOpacity.value, + }; + }), }; const hideControlAnimation = () => { - Animated.parallel([ - Animated.timing(animations.controlsOpacity, { - toValue: 0, - duration: controlAnimationTiming, - useNativeDriver: false, - }), - Animated.timing(animations.topControl.marginTop, { - toValue: -100, - duration: controlAnimationTiming, - useNativeDriver: false, - }), - Animated.timing(animations.bottomControl.marginBottom, { - toValue: -100, - duration: controlAnimationTiming, - useNativeDriver: false, - }), - ]).start(); + bottomControlMarginBottom.value = withTiming(100, { + duration: controlAnimationTiming, + }); + topControlMarginTop.value = withTiming(-100, { + duration: controlAnimationTiming, + }); + controlsOpacity.value = withTiming(0, { + duration: controlAnimationTiming, + }); }; const showControlAnimation = () => { - Animated.parallel([ - Animated.timing(animations.controlsOpacity, { - toValue: 1, - duration: controlAnimationTiming, - useNativeDriver: false, - }), - Animated.timing(animations.topControl.marginTop, { - toValue: 0, - duration: controlAnimationTiming, - useNativeDriver: false, - }), - Animated.timing(animations.bottomControl.marginBottom, { - toValue: 0, - duration: controlAnimationTiming, - useNativeDriver: false, - }), - ]).start(); + bottomControlMarginBottom.value = withTiming(0, { + duration: controlAnimationTiming, + }); + topControlMarginTop.value = withTiming(0, { + duration: controlAnimationTiming, + }); + controlsOpacity.value = withTiming(1, { + duration: controlAnimationTiming, + }); }; - useEffect(() => { - if (loading) { - const loadAnimation = () => { - if (loading) { - Animated.sequence([ - Animated.timing(animations.loader.rotate, { - toValue: animations.loader.MAX_VALUE, - duration: 1500, - easing: Easing.linear, - useNativeDriver: false, - }), - Animated.timing(animations.loader.rotate, { - toValue: 0, - duration: 0, - easing: Easing.linear, - useNativeDriver: false, - }), - ]).start(loadAnimation); - } - }; - loadAnimation(); - } - }, [animations.loader.MAX_VALUE, animations.loader.rotate, loading]); - return { animations, hideControlAnimation, diff --git a/src/types.ts b/src/types.ts index b350080..065066a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,19 +1,13 @@ import type {RefObject} from 'react'; -import type {Animated, ViewStyle, StyleProp} from 'react-native'; +import type {ViewStyle, StyleProp} from 'react-native'; +import type {StyleProps} from 'react-native-reanimated'; import type VideoResource from 'react-native-video'; import type {VideoProperties} from 'react-native-video'; export interface VideoAnimations { - bottomControl: {marginBottom: Animated.Value}; - topControl: {marginTop: Animated.Value}; - video: { - opacity: Animated.Value; - }; - loader: { - rotate: Animated.Value; - MAX_VALUE: number; - }; - controlsOpacity: Animated.Value; + bottomControl: StyleProps; + topControl: StyleProps; + controlsOpacity: StyleProps; } export interface VideoPlayerProps extends VideoProperties {