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

我想在

react native

中创建一个类似光盘的组件，用户可以通过触摸旋转该组件，并根据标记对齐相应的片段

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

有3个圆盘在中心旋转，每个圆盘应单独旋转。每个光盘上都有一些具有某些值的片段。对齐线段后，其外观可能如下图所示：

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

我一直在尝试查看

React Native Animated

API，但不确定是否可以用它实现这一点

---

此外，我不知道如何继续用户触摸输入以旋转光盘。

首先，您需要计算元素在磁盘

样式创建者中的位置。

函数将计算样式并返回它，如果您想在轮换时向磁盘添加元素，则需要圆形队列结构，如果不需要，并且磁盘上的元素始终相同，则只需使用简单数组

  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},
                  ]
      })
    }
  }

您可以按如下方式处理触摸移动：

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>

    )
  }

handlePanResponderMove=（e，手势状态）=>{
让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））{
移动=-1*移动
}
如果（移动>10）{
如果（10<移动）{
var Tm=移动/360
this.state.rotation.setValue（Tm）
}
}否则如果（移动<-10）{
如果（-80<移动和移动<-10）{
var Tm=移动/360
this.state.rotation.setValue（Tm）
}
}
}

组件渲染器应如下所示：

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.state={
旋转：新的动画值（0），
animatedValuedeg：新的动画值（0）
}
render（）{
返回(
{this.Components}
)
}

您必须编写一个方法来呈现要放入磁盘中的元素，并将其放入

this.Components

变量中 因为我不太明白您想要实现什么，所以我只是尝试给您一些想法和方法

---

享受好友乐趣

您尚未添加预期的输出图像以了解您想要实现的目标。我真的没得到多少。此外，这里有几个指导链接：非常感谢您的帮助。为了更清楚，我正在尝试制作一个与下面链接中显示的图像非常相似的组件。我希望光盘的旋转能够像图中所示的光盘一样工作。再次感谢！