什么'；s相当于使用react-native动画api对原点进行react-native svg旋转

下面是svg路径，它在每个

值

状态成功更改时围绕原点旋转，其中值为某个度数值：

<Path
   transform={{
      rotation: this.state.value,
      originX: width / 2,
      originY: height / 2
   }}
   d={`M ${width * 0.5} ${height * 0.5} L${width * 0.75} ${height * 0.75}`} //the actual path does not matter 
   fill={Colors.black}
   stroke={Colors.black}
   />

然后我渲染路径如下：

<Path
   style={transform:[{
      rotate: this.state.value
   }]}
   d={`M ${width * 0.5} ${height * 0.5} L${width * 0.75} ${height * 0.75}`} //the actual path does not matter 
   fill={Colors.black}
   stroke={Colors.black}
   />

与以前使用状态的代码相比，这根本不起作用。一个原因是动画API不支持的originX、originY值，我不知道如何替换，但我不确定这是唯一的原因，可能

rotate

也与

rotation

属性有所不同？。

---

因此，问题是，如何使用动画api实现连续调用setState的代码的相同结果？

您需要使用插值

const animation=this.state.value.interpolate({
  inputRange: [0, 360],
  outputRange: ['0deg', '360deg'],
});
<Path
   style={transform:[{
      rotate:animation
   }]}

常量动画=this.state.value.interpolate({
输入范围：[0360]，
输出范围：['0deg'，'360deg']，
});
你需要使用插值


const animation=this.state.value.interpolate({
  inputRange: [0, 360],
  outputRange: ['0deg', '360deg'],
});
<Path
   style={transform:[{
      rotate:animation
   }]}



常量动画=this.state.value.interpolate({
输入范围：[0360]，
输出范围：['0deg'，'360deg']，
});
我就是这样做到的：

// init the animatedComponents
const NeedlePath = Animated.createAnimatedComponent(Path);
const AnimatedG = Animated.createAnimatedComponent(G);

// set the animation
Animated.timing(this.state.angle, {
        toValue: 240, // degrees
        duration: 1000,
        useNativeDriver: true
    }).start();

// pivotX and pivotY are the originX, originY points.
// the width and height are calculated dynamically, so that the whole svg is a square (equal height width), and the center of it are my origins.
render() {
    let height = this.state.height;
    let width = this.state.width;
    let [pivotX, pivotY] = [0, 0];
    if (height && width) {
        [pivotX, pivotY] = [width / 2, height / 2];
    }
   return (
        <View
            style={{ flex: 1}}
            onLayout={event => {
                this.findDimesions(event.nativeEvent.layout); // find height and width dynamically, so that this remain a square container with same height and width
            }}
        >
            {height !== undefined && width !== undefined && (
                <Svg height={height} width={width} style={{ alignItems: "center" }}>
                   <G transform={`translate(${pivotX}, ${pivotY})`}>
                        <AnimatedG
                            style={{
                                transform: [
                                    {
                                        rotate: this.state.angle.interpolate({
                                            inputRange: [0, 360],
                                            outputRange: [`0deg`, `360deg`]
                                        })
                                    }
                                ]
                            }}
                        >
                            <NeedlePath
                                transform={`translate(-${pivotX} -${pivotY})`}
                                d={`M ${width * 0.5} ${height * 0.5} L${width * 0.5 + width * 0.25} ${height * 0.5 + height * 0.25}`}
                                fill={Colors.black}
                                stroke={Colors.black}
                            />
                        </AnimatedG>
                    </G>
                </Svg>
            )}
        </View>
    );
}

//初始化动画组件
const NeedlePath=Animated.createAnimatedComponent（路径）；
const AnimatedG=Animated.createAnimatedComponent（G）；
//设置动画
已设置动画。计时（this.state.angle{
toValue:240，//度
持续时间：1000，
useNativeDriver：真的吗
}).start（）；
//pivotX和pivotY是原点，原点。
//宽度和高度是动态计算的，因此整个svg是一个正方形（等高宽度），其中心是我的原点。
render（）{
让高度=this.state.height；
让宽度=this.state.width；
设[pivotX，pivotY]=[0，0]；
if（高度和宽度）{
[pivotX，pivotY]=[width/2，height/2]；
}
返回(
{
this.findDimesions（event.nativeEvent.layout）；//动态查找高度和宽度，使其保持高度和宽度相同的方形容器
}}
>
{高度！==未定义和宽度！==未定义和宽度(
有关android上需要的带偏移量的翻译的更多信息，请参见我的实现方式：

// init the animatedComponents
const NeedlePath = Animated.createAnimatedComponent(Path);
const AnimatedG = Animated.createAnimatedComponent(G);

// set the animation
Animated.timing(this.state.angle, {
        toValue: 240, // degrees
        duration: 1000,
        useNativeDriver: true
    }).start();

// pivotX and pivotY are the originX, originY points.
// the width and height are calculated dynamically, so that the whole svg is a square (equal height width), and the center of it are my origins.
render() {
    let height = this.state.height;
    let width = this.state.width;
    let [pivotX, pivotY] = [0, 0];
    if (height && width) {
        [pivotX, pivotY] = [width / 2, height / 2];
    }
   return (
        <View
            style={{ flex: 1}}
            onLayout={event => {
                this.findDimesions(event.nativeEvent.layout); // find height and width dynamically, so that this remain a square container with same height and width
            }}
        >
            {height !== undefined && width !== undefined && (
                <Svg height={height} width={width} style={{ alignItems: "center" }}>
                   <G transform={`translate(${pivotX}, ${pivotY})`}>
                        <AnimatedG
                            style={{
                                transform: [
                                    {
                                        rotate: this.state.angle.interpolate({
                                            inputRange: [0, 360],
                                            outputRange: [`0deg`, `360deg`]
                                        })
                                    }
                                ]
                            }}
                        >
                            <NeedlePath
                                transform={`translate(-${pivotX} -${pivotY})`}
                                d={`M ${width * 0.5} ${height * 0.5} L${width * 0.5 + width * 0.25} ${height * 0.5 + height * 0.25}`}
                                fill={Colors.black}
                                stroke={Colors.black}
                            />
                        </AnimatedG>
                    </G>
                </Svg>
            )}
        </View>
    );
}

//初始化动画组件
const NeedlePath=Animated.createAnimatedComponent（路径）；
const AnimatedG=Animated.createAnimatedComponent（G）；
//设置动画
已设置动画。计时（this.state.angle{
toValue:240，//度
持续时间：1000，
useNativeDriver：真的吗
}).start（）；
//pivotX和pivotY是原点，原点。
//宽度和高度是动态计算的，因此整个svg是一个正方形（等高宽度），其中心是我的原点。
render（）{
让高度=this.state.height；
让宽度=this.state.width；
设[pivotX，pivotY]=[0，0]；
if（高度和宽度）{
[pivotX，pivotY]=[width/2，height/2]；
}
返回(
{
this.findDimesions（event.nativeEvent.layout）；//动态查找高度和宽度，使其保持高度和宽度相同的方形容器
}}
>
{高度！==未定义和宽度！==未定义和宽度(
有关android上需要的带偏移量的翻译的更多信息
但是关于源代码呢？过去我寻找这样的选项，但没有找到，但是关于源代码呢？过去我寻找这样的选项，但没有找到