animation - 在 React Native 中通过用户触摸旋转光盘

Question

我想在 中创建一个类似圆盘的组件react-native，用户可以通过触摸旋转它，并相应地相对于标记对齐段。

下面是我打算制作的组件的图像：

中心有 3 个圆盘，每个圆盘都应单独旋转。每张光盘上都有一些带有一些值的段。一旦段对齐，它可能如下图所示：

我正在寻找一种通过用户触摸来旋转光盘的方法，以便可以对齐段并显示相应的值。

我一直在尝试查看React Native AnimatedAPI，但不确定是否可以使用它来实现。

另外，我不知道如何进行用户触摸输入以旋转光盘。

Answer 1

首先，您需要计算元素在磁盘中的位置，style creatore函数将计算样式并返回它，如果您想通过旋转将元素添加到磁盘，则需要 Round Queue 结构，如果不是，并且磁盘上的元素始终相同使用简单数组

  styleCreator = (Ncircle,radius) => {
    //this.Styles = new RoundQueue()
    this.Styles = []
    var step = 360 / (Ncircle);
    var degrees = [];
    for(let index = 0; index < Ncircle ; index ++ ){
      degrees.push(0 + index * step)
    }
    for(let index = 0; index < Ncircle ; index ++ ){
      let radTdeg = degrees[index] * Math.PI / 180
      let TX = radius * Math.cos(radTdeg)
      let TY = radius * Math.sin(radTdeg)
      let Rotate = degrees[index]
      //this.Styles.enqueue          
      this.Styles.push({
        position: 'absolute',
        transform: [
                    {translateX : TX},
                    {translateY : TY},
                  ]
      })
    }
  }

并让您的组件控制触摸使用Pan responder（请参阅 react native doc）

handleStartShouldSetPanResponder = (e, gestureState) => {
    return true
  }
handlePanResponderGrant = (e, gestureState) => {
 this.setState({dragging: true})
}

您可以像这样处理触摸移动：

handlePanResponderMove = (e, gestureState) => {
  let Moved = Math.sqrt(Math.pow(gestureState.dx,2)+Math.pow(gestureState.dy,2))
  if(Math.sign(gestureState.dx) == -1 &&  Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || Math.sign(gestureState.dy) == -1 &&  Math.abs(gestureState.dy) > Math.abs(gestureState.dx)) {
    Moved = -1 * Moved
  }
  if(Moved > 10 ){
    if(10 < Moved ) {
        var Tm = Moved / 360
        this.state.rotation.setValue(Tm)
      }
  } else if (Moved < -10) {
        if(-80 < Moved &&  Moved < -10) {
            var Tm = Moved / 360
            this.state.rotation.setValue(Tm)
          }
        }
}

你的组件渲染器应该是这样的：

this.state = {
        rotation : new Animated.Value(0),
        animatedValuedeg : new Animated.Value(0)
        }

render() {
    return(
      <Animated.View style = {{backgroundColor: 'transparent',
                transform: [{ rotate: this.MainRotate }]}}>
        <Animated.View style = {{
          transform: [{ rotate: this.spin }],
          backgroundColor: 'transparent',
          position : 'relative',
          alignItems:'center' ,
          justifyContent: 'center',
        }}
        >
        {this.Components}
        </Animated.View>
      </Animated.View>

    )
  }

你必须编写一个方法来渲染你想要放入磁盘的元素并将其放入this.Components变量中，因为我不太明白你想要实现什么，我只是想给你一个想法，告诉你怎么做

享受哥们