animated microphone

animated microphone in progress

app/components/post_draft/record_container/animated_microphone.tsx

@@ -0,0 +1,96 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect} from 'react';
+import {View} from 'react-native';
+import Animated, {interpolate, SharedValue, useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated';
+
+import CompassIcon from '@components/compass_icon';
+import {useTheme} from '@context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+
+const MIC_SIZE = 40;
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    const iconCommon = {
+        height: MIC_SIZE,
+        width: MIC_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+
+    const round = {
+        borderRadius: MIC_SIZE / 2,
+        backgroundColor: changeOpacity(theme.buttonBg, 0.12),
+    };
+
+    return {
+        mic: {
+            ...iconCommon,
+            ...round,
+        },
+        abs: {
+            position: 'absolute',
+        },
+        concentric: {
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    };
+});
+
+const useConcentricStyles = (circleId: number, sharedValue: SharedValue<number>) => {
+    const circles = [1.5, 2.5, 3.5];
+    return useAnimatedStyle(() => {
+        const scale = interpolate(sharedValue.value, [0, 1], [circles[circleId], 1]);
+        const opacity = interpolate(sharedValue.value, [0, 1], [1, 0]);
+
+        return {
+            opacity,
+            transform: [{scale}],
+            borderRadius: MIC_SIZE / 2,
+        };
+    }, [sharedValue]);
+};
+
+const AnimatedMicrophone = () => {
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
+
+    const val = useSharedValue(0);
+
+    const firstCircleAnimx = useConcentricStyles(0, val);
+    const secondCircleAnimx = useConcentricStyles(1, val);
+    const thirdCircleAnimx = useConcentricStyles(2, val);
+
+    useEffect(() => {
+        val.value = withRepeat(
+            withTiming(1, {duration: 1000}),
+            800,
+            true,
+        );
+    }, []);
+
+    return (
+        <View style={[styles.mic]}>
+            <View style={styles.concentric} >
+                <Animated.View style={[styles.mic, styles.abs, firstCircleAnimx]}/>
+                <Animated.View style={[styles.mic, styles.abs, secondCircleAnimx]}/>
+                <Animated.View style={[styles.mic, styles.abs, thirdCircleAnimx]}/>
+            </View>
+            <View
+                style={[styles.mic, styles.abs]}
+            >
+                <CompassIcon
+                    name='microphone'
+                    size={24}
+                    color={theme.buttonBg}
+                />
+            </View>
+        </View>
+
+    );
+};
+
+export default AnimatedMicrophone;
+

app/components/post_draft/record_container/index.tsx

@@ -8,6 +8,7 @@ import CompassIcon from '@components/compass_icon';
 import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
+import AnimatedMicrophone from './animated_microphone';
 import SoundWave from './sound_wave';
 import TimeElapsed from './time_elapsed';
 
@@ -27,6 +28,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     };
 
     return {
+        mainContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            height: 88,
+        },
         container: {
             flexDirection: 'row',
             alignItems: 'center',
@@ -52,15 +59,9 @@ const RecordContainer = () => {
     const styles = getStyleSheet(theme);
 
     return (
-        <View
-            style={styles.container}
-        >
-            <View style={styles.mic}>
-                <CompassIcon
-                    name='microphone'
-                    size={24}
-                    color={theme.buttonBg}
-                />
+        <View style={styles.mainContainer}>
+            <View style={{position: 'relative'}}>
+                <AnimatedMicrophone/>
             </View>
             <SoundWave/>
             <TimeElapsed/>