javascript - Hur man visualiserar ljudvågor som Google Meet gör medan en person pratar i React Native

Jag försöker åstadkomma en mycket liknande animation i exemplet nedan.

Min metod var så här: Hämta röstvolymsdata, lägg till det i en View:s borderWidth med hjälp av ett sharedValue från react-native-reanimated. Men eftersom borderWidth lägger sig själv inuti View, ser visualiseringen ut som i följande exempel:

nedan kan du hitta min kod,

initialisering av react-native-reanimated-relaterade tillstånd.

  const voiceVolumeMeter = useSharedValue(0);
  const voiceVolumeMeterStyles = useAnimatedStyle(() => {
    return {
      borderWidth: voiceVolumeMeter.value,
    };
  });

lägger till volymdata till voiceVolumeMeter-parametern:

  voiceVolumeMeter.value = withSpring(55 + e.currentMetering!, {
    stiffness: 90,
    velocity: 12,
    mass: 0.5,
  });

tillämpa animatedStyle på View

<Animated.View style={[styles.volumeMeterContainer, voiceVolumeMeterStyles]}>
  <View style={styles.recorderCircle}>
    <Text style={styles.audioRecorderTimer}>{recorderState.duration}</Text>
  </View>
</Animated.View>

stilar som använde ovanstående kodexempel:

  recorderCircle: {
    width: 280,
    height: 280,
    borderRadius: 150,
    borderColor: Colors.DUSTY_ORANGE,
    justifyContent: 'center',
    alignItems: 'center',
  },

  volumeMeterContainer: {
    width: 290,
    height: 290,
    borderRadius: 140.5,
    borderColor: Colors.WINDOWS_BLUE,
    justifyContent: 'center',
    padding: 20,
  },

  audioRecorderTimer: {
    fontFamily: 'Quicksand',
    fontStyle: 'normal',
    fontWeight: '700',
    fontSize: 45,
    lineHeight: 56,
    textAlign: 'center',
    letterSpacing: -0.746023,
    color: Colors.DUSTY_ORANGE,
  },

Detta tillvägagångssätt producerade i princip en helt omvänd version av Googles visualisering. Jag har försökt med CSS:s outline-egenskaper men tyvärr stöds inte outline-egenskaper på React Native. Så jag behöver en annan metod men jag kunde inte komma på en lysande idé här.

All hjälp kommer att uppskattas,

Med vänliga hälsningar.

Svar #1

Hej tack vare din fråga gjorde jag detta, för att replikera meet chat,

Det här är liveexemplet här, tveka inte om frågor, expo-snack-länk

Ditt svar herr

import React, { PureComponent ,useEffect,useCallback , useState } from 'react';
import { StyleSheet, View, TouchableWithoutFeedback, Animated, Easing, Platform ,Text} from 'react-native';




const AppNew = (props={}) => {

const currentVolume = props?.currentVolume ?? 0

const maxVolume = 50;

const animationRef = React.useRef(new Animated.Value(0)).current

const startAnimations = useCallback(() => {
  Animated.timing(animationRef,{
    toValue:(currentVolume/maxVolume),
    useNativeDriver:true,
    duration:500
  }).start()
},[animationRef,currentVolume])

useEffect(() => {
startAnimations()
},[startAnimations])

const polAnim = animationRef.interpolate({
  inputRange:[0,1],
  outputRange:[1,2],
  extrapolate:'clamp'
})

  return(
    <Animated.View style={[styles.ripler,{

      position:'absolute',
      height:60,
      width:60,
      borderRadius:120,

      transform:[{
        scale:polAnim
      }]
    }]} >
    </Animated.View>
  )
}
  const data = [1,6,39,40,50,22,7,15,12,1,6,39,40,50,22,7,15,18,1,6,39,40,50,22,7,15,12,1,6,39,40,50,22,7,15,12,1,6,39,40,50,22,7,15,12,1,6,39,40,50,22,7,15,12]

const App  = () => {

    const [currentTime, setTime ] = useState(0);
    const [currIndex,setIndex] = useState(0)

    useEffect(() => {
     const interval = setInterval(() => {
        const newIndex = currIndex +1;
        setTime(data[currIndex]);
        setIndex(newIndex);
      },500)
      return () => clearInterval(interval)
    },[currIndex]) 

        return (
            <View style={styles.pageContainer}>   
              <View style={{height:100,width:100}} >
              <AppNew currentVolume={currentTime} />
              <View style={{height:60,width:60,borderRadius:60,
              alignItems:'center',
              justifyContent:'center',
              backgroundColor:'rgba(125,244,102,0.9)',
              zIndex:3
              }} >
              <Text>Messi</Text>
              </View>
              </View>
            </View>
        );

}




const styles = StyleSheet.create({
    pageContainer: {
        flex: 1,
        alignItems:'center',
        justifyContent:'center'
    },
    ripler:{
 backgroundColor:'rgba(125,244,102,0.3)',
 zIndex:2
    },
    contentContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    iconContainer: {
        margin: 16, 
        alignItems: 'center',
        justifyContent: 'center',
    },
});


export default App;