如何在 React Native 中实现涟漪效果

Question

In some applications, I see when a user is speaking the background of the user profile has these circles increasing and decreasing in radius.

How do I achieve this using React Native and Reanimated-v2?

Answer 1

You can achieve it using react-native-lottie easily

Working example: https://codesandbox.io/s/loving-leakey-0e5j5n

1. Find the free ripple effect that you want on https://lottiefiles.com/search?q=ripple&category=animations&type=free for example https://lottiefiles.com/16138-ripple but you can search for specific keywords and use the one that looks like with audio syncing like this one https://lottiefiles.com/31698-audio-power

2. Download lottie json file (You will need an account for it) and you can change also layers color before download. This

3. Integrate it using https://github.com/lottie-react-native/lottie-react-native into your react-native app.

I have created working example here for you https://codesandbox.io/s/loving-leakey-0e5j5n styles won't be perfect in example but you can update it as per your need.

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import LottieView from 'lottie-react-native';

function App() {
  return (
    <View style={styles.app}>
      <View style={styles.content}>
        <Text style={styles.title}>React Native Lottie</Text>
        <View style={styles.lottieContainer}>
          <LottieView source={require("./assets/ripple.json")} autoPlay loop />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    flex: 1
  },
  content: {
    alignItem: "center",
    padding: 20,
    position: "relative",
    flex: 1,
    justifyContent: "center"
  },
  title: {
    fontWeight: "bold",
    fontSize: "1.5rem",
    marginVertical: "1em",
    textAlign: "center",
    zIndex: 1
  },
  lottieContainer: {
    backgroundColor: "#5295d1",
    position: "absolute",
    justifyContent: "center",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 0
  }
});

export default App;