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

Question

在某些应用程序中，当用户说话时，我看到用户个人资料的背景有这些圆圈的半径增加和减少。

如何使用 React Native 和 Reanimated-v2 实现此目的？

Answer 1

您可以使用 react-native-lottie 轻松实现它

工作示例： https://codesandbox.io/s/loving-leakey-0e5j5n

找到您想要的免费涟漪效果 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
下载 lottie json 文件（您需要一个帐户）并且您还可以在下载前更改图层颜色。这个
使用 https://github.com/lottie-react-native/lottie-react-native进入你的 react-native应用

我在这里为您创建了工作示例https://codesandbox.io/s/loving-leakey-0e5j5n示例中的样式并不完美，但您可以根据需要进行更新。

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;

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

How to achieve the ripple effect in React Native

reactjs

react-native

react-animations

react-native-reanimated-v2