@unif/react-native-ui 0.1.0

package/src/wave-animation/index.tsx

@@ -0,0 +1,93 @@
+/**
+ * WaveAnimation 原子组件
+ *
+ * 柱状声波动画，可配置柱数、尺寸和颜色。
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+
+export interface WaveAnimationProps {
+  active: boolean;
+  color?: string;
+  barCount?: number;
+  barWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+const WaveAnimation: React.FC<WaveAnimationProps> = ({
+  active,
+  color = '#FFFFFF',
+  barCount = 4,
+  barWidth = 3,
+  minHeight = 6,
+  maxHeight = 20,
+  style,
+  testID,
+}) => {
+  const animations = useRef(
+    Array.from({ length: barCount }, () => new Animated.Value(minHeight)),
+  ).current;
+
+  useEffect(() => {
+    if (!active) {
+      animations.forEach((anim) => anim.setValue(minHeight));
+      return;
+    }
+
+    const loops = animations.map((anim, index) =>
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(anim, {
+            toValue: maxHeight - index * 3,
+            duration: 300 + index * 100,
+            useNativeDriver: false,
+          }),
+          Animated.timing(anim, {
+            toValue: minHeight,
+            duration: 300 + index * 100,
+            useNativeDriver: false,
+          }),
+        ]),
+      ),
+    );
+
+    loops.forEach((loop) => loop.start());
+
+    return () => {
+      loops.forEach((loop) => loop.stop());
+    };
+  }, [active, animations, minHeight, maxHeight]);
+
+  return (
+    <View style={[styles.container, { height: maxHeight }, style]} testID={testID}>
+      {animations.map((anim, index) => (
+        <Animated.View
+          key={index}
+          style={[
+            {
+              width: barWidth,
+              borderRadius: barWidth / 2,
+              height: anim,
+              backgroundColor: color,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+  },
+});
+
+export default React.memo(WaveAnimation);