我正在尝试通过以下代码为 SVG 制作动画:
//create animated path component
const AnimatedPath = Animated.createAnimatedComponent(Path);
P1 = new Animated.ValueXY({x: 0, y: 1});
P2 = new Animated.ValueXY({x: 1, y: 1});
P3 = new Animated.ValueXY({x: 2, y: 1});
path = `M ${this.P1._value} ${this.P1._value} S ${this.P2.x._value} ${this.P2.y._value} ${this.P3.x._value} ${this.P3.y._value}`;
Animated.timing(this.P1, {
toValue: {x: 3, y: 3},
duration: 300,
useNativeDriver: 'true',
}).start();
<Svg height="50%" width="50%" viewBox="0 0 4 4 " fill="blue">
{/* <Path /> */}
{console.log('this.P1.x: ', this.P1.x)}
<AnimatedPath
d={this.path}
// d="M 0 1 S 1 1 2 1"
fill="none"
stroke="red"
/>
</Svg>
但它不起作用。有什么办法让它变得动画吗?
我们还应该使用react-native-reanimated2吗?
最佳答案
检查 reanimated2 文档中的 useAnimatedProps 。 请注意,记录的示例有一些缺陷,这里是一个演示:
import { StyleSheet } from 'react-native';
import {
Animated,
useSharedValue,
useAnimatedProps,
withTiming
} from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';
const AnimatedPath = Animated.createAnimatedComponent(Path);
function App() {
const radius = useSharedValue(50);
const animatedProps = useAnimatedProps(() => {
// draw a circle
const path = `
M 100, 100
m -${radius}, 0
a ${radius},${radius} 0 1,0 ${radius * 2},0
a ${radius},${radius} 0 1,0 ${-radius * 2},0
`;
return {
d: path
};
});
// attach animated props to an SVG path using animatedProps
return <Svg><AnimatedPath animatedProps={animatedProps} fill="black" onPress={() => radius.value = withTiming(Math.random() * 180)} /></Svg>
}
我知道您可能找到了解决方案,但我想为偶然发现此问题的人提供答案。
关于javascript - 动画 React-native-svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63934357/