在React Native Expo中实现动态能量流线动画的技术求助

针对你在房屋图片上实现能量流动线条动画的需求，这里提供两种适配Expo环境的实用方案：

方案一：React Native SVG + Reanimated 自定义流动线条 #

适合需要自定义线条路径、灵活调整动画参数的场景，核心利用SVG的strokeDasharray和strokeDashoffset属性实现流动效果。

步骤1：安装依赖 #

npx expo install react-native-svg react-native-reanimated

步骤2：实现动画组件 #

import React, { useEffect } from 'react';
import { View, Image } from 'react-native';
import Svg, { Path } from 'react-native-svg';
import Animated, { useSharedValue, useAnimatedProps, withRepeat, withTiming } from 'react-native-reanimated';

// 创建可动画的SVG路径组件
const AnimatedPath = Animated.createAnimatedComponent(Path);

const EnergyFlowScreen = () => {
  // 控制线条偏移的共享值
  const dashOffset = useSharedValue(0);

  useEffect(() => {
    // 启动循环动画：1500ms完成一次偏移，无限重复
    dashOffset.value = withRepeat(withTiming(100, { duration: 1500 }), -1, false);
  }, []);

  // 绑定动画属性到SVG路径
  const animatedProps = useAnimatedProps(() => ({
    strokeDashoffset: dashOffset.value,
  }));

  // 替换为你自己的房屋线条路径（可通过Figma/AI绘制后导出SVG路径）
  const energyPath = "M150,250 L250,150 L350,250 L250,350 Z";

  return (
    <View style={{ flex: 1, position: 'relative' }}>
      {/* 房屋背景图 */}
      <Image 
        source={require('./assets/house.png')} 
        style={{ width: '100%', height: '100%', resizeMode: 'contain' }} 
      />
      {/* 叠加能量流动线条 */}
      <Svg style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
        <AnimatedPath
          d={energyPath}
          stroke="#4CAF50" // 能量线条颜色
          strokeWidth={4}
          strokeDasharray="25,10" // 虚线段长度+间隔，调整可改变流动粒子形态
          strokeLinecap="round" // 线条端点圆润化
          animatedProps={animatedProps}
        />
      </Svg>
    </View>
  );
};

export default EnergyFlowScreen;

关键参数说明 #

• strokeDasharray：控制虚线的段长和间隔，比如"25,10"表示25长度的实线+10长度的空白
• duration：调整动画速度，数值越小流动越快
• stroke：自定义线条颜色，匹配你的UI风格

方案二：Lottie动画（快速还原设计师效果） #

如果已经有设计师制作好的能量流动动画，直接用Lottie可以快速实现高还原度的效果，无需手动写路径。

步骤1：安装依赖 #

npx expo install lottie-react-native

步骤2：导入并播放动画 #

import React from 'react';
import { View, Image } from 'react-native';
import LottieView from 'lottie-react-native';

const EnergyFlowLottieScreen = () => {
  return (
    <View style={{ flex: 1, position: 'relative' }}>
      {/* 房屋背景图 */}
      <Image 
        source={require('./assets/house.png')} 
        style={{ width: '100%', height: '100%', resizeMode: 'contain' }} 
      />
      {/* 叠加Lottie能量动画 */}
      <LottieView
        source={require('./assets/energy-flow.json')} // 设计师导出的Lottie JSON文件
        autoPlay
        loop
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
        resizeMode="contain"
      />
    </View>
  );
};

export default EnergyFlowLottieScreen;

注意事项 #

• 设计师需用After Effects制作动画，通过Bodymovin插件导出为Lottie JSON格式
• 可通过调整Lottie组件的style属性，精准对齐房屋背景图的线条位置

内容的提问来源于stack exchange，提问作者S. N