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
}
}}
/>
);
};
蘇生で目的の出力を達成するにはどうすればよいですか?