5

React Native reanimated を使用して簡単なアニメーションを作成しましたが、Reanimated Value の数値にアクセスできません

私は勝利のネイティブ円グラフを使用しており、円の角度が 0 から 360 になるという単純な効果を作りたいのですが、react-native アニメーション API を試してみました。これはリスナーの追加でうまく機能しますが、パフォーマンスの問題のために蘇生を使用したい

グラフが 0 から 360 で始まる、探しているアニメーション効果

反応ネイティブのアニメーション 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