如何用React-Native和Reanimated为svg动画道具转换

Question

import React, { FC } from "react";
import { G } from "react-native-svg";
import Animated, { useAnimatedProps, useDerivedValue, withSpring } from "react-native-reanimated";
import { CanvasControlledValuesProps } from "./helpers/types";
import { Candle } from "./Candle";
import { CANDLE_WIDTH } from "../../constants/sizes";
const AnimatedGroup = Animated.createAnimatedComponent(G);
export const Canvas: FC<CanvasControlledValuesProps> = ({
scaleY,
scaleX,
translateX,
offsetByY,
data,
initialDomain,
}) => {
const props = useAnimatedProps(() => {
return {
x: withSpring(translateX.value, {
damping: 20,
stiffness: 90,
}),
y: withSpring(offsetByY.value, {
damping: 20,
stiffness: 90,
}),
transform: { scale: [scaleX.value, scaleY.value] },
};
});
return (
<AnimatedGroup animatedProps={props}>
{data.map((candle, index) => (
<Candle key={index} width={CANDLE_WIDTH} {...{ candle, index }} domain={initialDomain} />
))}
</AnimatedGroup>
);
};

美好的一天!我需要增加或减少AnimatedGroup的内容，所以我决定使用G，但有一个问题:比例不适用于AnimatedGroup，为什么会这样?我没有用过动画。视图，因为Svg内容(AnimatedGroup位于其中)的质量将丢失。

Answer 1

const style = useAnimatedStyle(() => {
return {
transform: [
{
translateX: offsetByX.value,
},
{
translateX: withSpring(translateX.value, springConfig),
},
{
translateY: withSpring(adaptation.value.offsetByY, springConfig),
},
{
scaleX: scaleX.value,
},
{
scaleY: withSpring(adaptation.value.scaleY, springConfig),
},
],
};
});
return (
<AnimatedGroup style={style}>
{data.map((candle, index) => (
<Candle key={index} width={CANDLE_WIDTH} {...{ candle, index }} domain={initialDomain} />
))}
</AnimatedGroup>
);

解决方案是为动画组添加动画样式。或者您可以像这样使用matrix属性:

const props = useAnimatedProps(() => {
return {
x: withSpring(translateX.value, {
damping: 20,
stiffness: 90,
}),
y: withSpring(offsetByY.value, {
damping: 20,
stiffness: 90,
}),
matrix: [scaleX.value, 0, 0, scaleY.value, 0, 0],
};
});

你可以在这里阅读矩阵的工作https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform