React Native中如何条件修改Lottie动画JSON文件中circle元素的填充色

嘿，我来帮你搞定这个问题！你当前的思路是对的，用colorFilters来修改Lottie元素的颜色，但可能在状态响应或者keypath配置上需要调整，下面是具体的解决方案和排查点：

1. 确保状态是响应式的 #

首先你需要保证progress是能触发组件重渲染的响应式状态：

• 如果用React原生状态：用useState来定义，而不是普通变量，这样当progress变化时，组件会重新计算colorFilters
• 如果用Reanimated的共享值：需要配合useDerivedValue来生成动态的colorFilters数组，因为共享值的变化不会直接触发组件重渲染

2. 正确配置Keypath #

keypath必须完全匹配Lottie文件里Circle元素的层级路径，很多时候失败都是因为路径不对：

• 用Lottie编辑器打开你的splash_logo_2.json文件，查看Circle元素的完整路径（比如如果Circle在名为LogoGroup的分组下，keypath应该写成'LogoGroup.circle'）
• 注意大小写和名称的完全匹配，Lottie的keypath是区分大小写的

3. 修正后的代码示例 #

情况一：使用React原生useState #

这是最基础的方案，适合不需要动画过渡的场景：

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

const SplashScreen = () => {
  // 定义响应式状态progress
  const [progress, setProgress] = useState(0);

  return (
    <LottieView
      source={require('../assets/splash_logo_2.json')}
      autoPlay
      loop={false}
      // 动画结束时更新状态
      onAnimationFinish={() => setProgress(1)}
      // 动态生成colorFilters，依赖progress状态
      colorFilters={[
        {
          keypath: 'circle', // 替换成你实际的Circle元素路径
          color: progress === 1 ? '#85AA82' : '#B5FFAF',
        },
      ]}
    />
  );
};

export default SplashScreen;

情况二：使用Reanimated共享值（适合动画过渡场景） #

如果你的progress是用Reanimated管理的共享值，需要用useDerivedValue来同步colorFilters的变化：

import React from 'react';
import LottieView from 'lottie-react-native';
import { useSharedValue, useDerivedValue } from 'react-native-reanimated';

const SplashScreen = () => {
  const progress = useSharedValue(0);

  // 根据共享值动态生成colorFilters
  const colorFilters = useDerivedValue(() => [
    {
      keypath: 'circle',
      color: progress.value === 1 ? '#85AA82' : '#B5FFAF',
    },
  ]);

  return (
    <LottieView
      source={require('../assets/splash_logo_2.json')}
      autoPlay
      loop={false}
      onAnimationFinish={() => (progress.value = 1)}
      colorFilters={colorFilters}
    />
  );
};

export default SplashScreen;

常见问题排查 #

• 先测试固定颜色：把color改成'red'，看Circle是否变红，排除颜色值和keypath的问题
• 检查Lottie文件：确保Circle元素的名称确实是circle，没有拼写错误或者分组嵌套
• 确认状态更新：在onAnimationFinish里加个console.log，看progress是否真的变成了1

内容的提问来源于stack exchange，提问作者wind_kind