React Native语音音调追踪动画卡顿问题求助

问题核心是频繁调用setState触发组件重渲染，同时没有充分利用Reanimated的原生线程优势。以下是具体优化方案：

1. 用Reanimated共享值（Shared Value）替代React状态 #

React状态更新会触发组件重渲染，而Reanimated的共享值直接在原生线程更新，不会触发JS线程的重渲染，完美适配高频更新的动画场景。

import React, { useEffect } from 'react';
import { View } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, interpolate, withSpring } from 'react-native-reanimated';
import Voice, { SpeechVolumeChangeEvent } from '@react-native-voice/voice';

const VoiceAnimation = () => {
  // 用共享值存储音量，替代React状态
  const pitch = useSharedValue(0);

  useEffect(() => {
    const handleVolumeChange = (event: SpeechVolumeChangeEvent) => {
      const newPitch = event.value ?? 0;
      // 平滑更新共享值，避免突变
      pitch.value = pitch.value * 0.7 + newPitch * 0.3;
    };

    Voice.onSpeechVolumeChanged = handleVolumeChange;

    return () => {
      Voice.destroy().catch(console.error);
    };
  }, []);

  // 基于共享值创建动画样式
  const animatedStyle = useAnimatedStyle(() => {
    // 插值：将音量值映射到缩放范围（0.8-1.5）
    const scale = interpolate(pitch.value, [0, 1], [0.8, 1.5]);
    return {
      transform: [{ scale: withSpring(scale, { damping: 15, stiffness: 100 }) }],
    };
  });

  return (
    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
      <Animated.View style={[animatedStyle, { width: 12, height: 12, borderRadius: 6, backgroundColor: '#333' }]} />
      <Animated.View style={[animatedStyle, { width: 12, height: 12, borderRadius: 6, backgroundColor: '#333' }]} />
      <Animated.View style={[animatedStyle, { width: 12, height: 12, borderRadius: 6, backgroundColor: '#333' }]} />
    </View>
  );
};

export default VoiceAnimation;

2. 节流音量更新（可选） #

如果共享值的更新还是过于频繁，可以给音量回调加节流，限制更新频率（比如每100ms更新一次）：

// 自定义节流函数
const throttle = <T extends (...args: any[]) => void>(func: T, delay: number) => {
  let lastCall = 0;
  return (...args: Parameters<T>) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
};

// 在useEffect中使用节流后的回调
useEffect(() => {
  const throttledHandleVolume = throttle((event: SpeechVolumeChangeEvent) => {
    const newPitch = event.value ?? 0;
    pitch.value = pitch.value * 0.7 + newPitch * 0.3;
  }, 100);

  Voice.onSpeechVolumeChanged = throttledHandleVolume;

  return () => {
    Voice.destroy().catch(console.error);
  };
}, []);

3. 复刻ChatGPT风格动画 #

ChatGPT的说话动画并非完全实时跟随音量，而是当检测到语音输入时，触发一组循环的波浪缩放动画，音量仅控制动画的启停或幅度：

import React, { useEffect } from 'react';
import { View } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
import Voice, { SpeechStartEvent, SpeechEndEvent, SpeechVolumeChangeEvent } from '@react-native-voice/voice';

const ChatGPTLikeAnimation = () => {
  const isSpeaking = useSharedValue(false);
  const pitch = useSharedValue(0);

  useEffect(() => {
    const handleSpeechStart = () => {
      isSpeaking.value = true;
    };

    const handleSpeechEnd = () => {
      isSpeaking.value = false;
    };

    const handleVolumeChange = (event: SpeechVolumeChangeEvent) => {
      pitch.value = event.value ?? 0;
    };

    Voice.onSpeechStart = handleSpeechStart;
    Voice.onSpeechEnd = handleSpeechEnd;
    Voice.onSpeechVolumeChanged = handleVolumeChange;

    return () => {
      Voice.destroy().catch(console.error);
    };
  }, []);

  // 三个圆点的动画样式，分别添加延迟
  const dotStyle1 = useAnimatedStyle(() => {
    const scale = isSpeaking.value ? withRepeat(withSequence(withTiming(1.5, { duration: 300 }), withTiming(0.8, { duration: 300 })), -1) : 0.8;
    return {
      transform: [{ scale }],
      opacity: isSpeaking.value ? 1 : 0.5,
    };
  });

  const dotStyle2 = useAnimatedStyle(() => {
    const scale = isSpeaking.value ? withRepeat(withSequence(withTiming(1.5, { duration: 300, delay: 100 }), withTiming(0.8, { duration: 300 })), -1) : 0.8;
    return {
      transform: [{ scale }],
      opacity: isSpeaking.value ? 1 : 0.5,
    };
  });

  const dotStyle3 = useAnimatedStyle(() => {
    const scale = isSpeaking.value ? withRepeat(withSequence(withTiming(1.5, { duration: 300, delay: 200 }), withTiming(0.8, { duration: 300 })), -1) : 0.8;
    return {
      transform: [{ scale }],
      opacity: isSpeaking.value ? 1 : 0.5,
    };
  });

  return (
    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
      <Animated.View style={[dotStyle1, { width: 12, height: 12, borderRadius: 6, backgroundColor: '#333' }]} />
      <Animated.View style={[dotStyle2, { width: 12, height: 12, borderRadius: 6, backgroundColor: '#333' }]} />
      <Animated.View style={[dotStyle3, { width: 12, height: 12, borderRadius: 6, backgroundColor: '#333' }]} />
    </View>
  );
};

export default ChatGPTLikeAnimation;

关键优化点： #

• 避免用React状态存储高频更新的音量值，改用Reanimated共享值，跳过JS线程重渲染
• 添加值的平滑过渡，避免动画突变
• 节流更新频率（可选），减少原生线程的压力
• 参考ChatGPT的动画逻辑，优先基于语音启停状态触发循环动画，再用音量微调幅度（可选）

内容的提问来源于stack exchange，提问作者PietroPutelli