我试图在React-Native中创建一个SVG图标的脉动效果（react-native-svg）.我对使用Reanimated的动画方面很满意。我正在考虑通过改变Path的“scale”值来创建脉动效果。问题是修改“scale”值要么“切断”图像的可见部分，如果scale值〉1或值小于1，它缩小移动到侧面（即。不停留在视图的中心。我明白svg将左上角作为原点。
const AnimatedPath = Animated.createAnimatedComponent(Path);
const PulsatingSign = () => {
return (
<Svg width={43} height={63} viewBox="0 0 43 63" fill="red">
<AnimatedPath scale={animatedValue} d="M......" />
</Svg>
);
};我唯一能想到的就是动画（即：更改width和height的值：
const PulsatingSign = () => {
return (
<Svg width={animatedWidth} height={animatedHeight} viewBox={`0 0 ${animatedWidth} ${animatedHeight}`} fill="red">
<Path d="M......" />
</Svg>
);
};或者用View Package svg组件并缩放View（我假设是直接对svg元素进行动画处理会更高效，而不是 Package 视图。
const PulsatingSign = () => {
return (
<Animated.View style={{ transform: [{ scale: animatedValue }]}>
<Svg width="100%" height="100%" viewBox="0 0 43 67" fill="red">
<Path d="M......" />
</Svg>
</Animated.View>
);
};什么是最好的方式保持图标的权利，在中间，并保持脉动（即。重新缩放）。
1条答案
按热度按时间hmtdttj41#
有两个问题：
1.路径的0，0点在路径的某个地方，而不是在中间。
1.缩放使路径比视图框更大。
在不改变路径的情况下（你也可以通过将0，0点移动到路径的中间来改变路径），你可以为父组元素设置动画，同时变换/平移路径，使0，0点最终位于路径的中间。
你可以缩小路径，而不是放大路径，这样它对viewBox来说就太大了。另一种方法是放大viewBox或者编辑路径，这样它就变小了。