5

我使用 react native reanimated 创建了一个简单的动画，但我无法访问 Reanimated Value 的数值

我使用胜利原生饼图，我想制作一个简单的效果，饼角从 0 到 360，但我已经尝试过 react-native 动画 API，它适用于添加侦听器，但我想使用 reanimated 来解决性能问题

我正在寻找的图表从 0 到 360 的动画效果

使用 react-native Animated API 正确运行：

const Chart = props => {
  const { data, width, height } = props;
  const endAngleAnimatedValue = new Value(0);
  const [endAngle, setEndAngle] = useState(0);
  const runTiming = Animated.timing(endAngleAnimatedValue, {
    duration: 1000,
    to: 360
  });

  useEffect(() => {
    endAngleAnimatedValue.addListener(_endAngle => setEndAngle(_endAngle));
    runTiming.start();
    return () => {
      endAngleAnimatedValue.removeAllListeners();
    };
  }, [endAngleAnimatedValue]);

  return (
    <VictoryPie
      data={data}
      width={width}
      height={height}
      padding={0}
      startAngle={0}
      endAngle={endAngle}
      style={{
        data: {
          fill: ({ datum }) => datum.fill,
          fillOpacity: 0.7
        }
      }}
    />
  );
};

我如何才能通过复活来实现所需的输出？

4

1 回答 1

0

我完全忘记了这个问题，

如果使用react-native-reanimated v1，我们可以有两种实现：

1. using react-native-svg and some helpers from react-native-redash

2. using `const AnimatedPie = Animated.createAnimatedComponent(VictoryPie)` then passing `endAngleAnimatedValue` as a prop.

在复活的 v2 中：

您可以显式使用.value动画sharedValues, derivedValues，但也必须创建动画组件

于 2021-03-29T16:03:12.357 回答