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

Question

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

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



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



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

我一直想看React Native Animated API 但不确定我是否可以用它来实现这一点。

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

Answer 1

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

  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 文档)

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多变的
因为我不太明白你想实现什么，我只是试着给你和想法如何去做

享受好友