前端之家

  1. 首页
  2. 问答

使用react-native动画API与原点的react-native-svg旋转相当于什么

• 问答

我在svg路径下面，该路径在每个value状态更改中都成功绕原点旋转，其中value是某个度值：

<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}
   />

我每隔约20毫秒在value上调用setState，但这还不够平滑，这不是推荐的过渡方式。 我要实现的是使用动画API对旋转进行动画处理，以实现更平滑的旋转。

我尝试将value的状态设为Animated.Value。然后将Path设为Animated.createAnimatedComponent(Path)并调用：

Animated.timing(this.state.value,{
    toValue: newDegreesValue,duration: 1000,useNativeDriver: true
}).start();

然后我将路径渲染如下：

<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}
   />

这完全无法与使用state的先前工作代码相提并论。原因之一是动画API不支持originX，originY值，我也不知道如何替换，但我不确定这是唯一的原因，也许rotate与{{1 }}属性吗？ 因此，问题是，如何使用动画api通过连续调用setState的代码实现相同的结果？

tianshixincq 回答：使用react-native动画API与原点的react-native-svg旋转相当于什么

您需要使用插值


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

这是我实现它的方式：

// 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,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>
    );
}

style={{ alignItems: "center" }}对于在android上获得相同的结果也至关重要，而不是使用offsetAndroid设置translationX和translationY。这适用于react-native-svg的版本v9.13.3。也许在较新的版本中，由于解决了翻译问题而受到了影响，我不知道对这里的代码有什么影响。您可以参考here以获得有关android上需要偏移的翻译的更多信息

animationreact-nativereact-native-svg
本文链接：https://www.f2er.com/2786248.html

大家都在问