2

I'm building a react native app where the user should be able to move an adjuster around a pie chart to adjust the start and end angles of the pie slices. I'm using 3 panResponders and used the idea by /users/681830/val:

react native circle transform translate animation

I'm calculating the shortest distance to either of the 36 snapshots then set the animated value to that point however it is super inefficient and laggy. Can anyone suggest any better performing solution?

'''

this._panResponder1 = PanResponder.create(
  {
    onStartShouldSetPanResponder: (evt, gesture) =>true,
    onPanResponderMove: (evt, gesture) => {



      //we need the distance between the points and get the index of the minimum distance
      distances = [];
      for(var i = 0; i < 36; i++){
        var a = this.outputRangeX[i] - gesture.moveX;
        var b = this.outputRangeY[i] - gesture.moveY + 120;
        distances.push(Math.sqrt(a*a + b*b));
      }


      var minInd = distances.indexOf(Math.min(...distances));
      this.setState({indexOfAdj1 : minInd});
      this.adj1Anim.setValue((1/36)* minInd);





      var isPos1 = minInd/36;
      var isPos2 = (minInd)/36;
      if(minInd>24){
        isPos1 = -1 * ((36-minInd)/36);
        isPos2 = minInd/36;
        this.setState({data: [
          {
            number: 1,
            startAngle: isPos1* Math.PI * 2,
            endAngle: this.state.data[0].endAngle,
        },
        {
            number: 30,
            startAngle: this.state.data[1].startAngle,
            endAngle: this.state.data[1].endAngle,
        },
        {
            number: 1,
            startAngle: this.state.data[1].endAngle,
            endAngle: isPos2* Math.PI * 2,
        },
        ]});
      }else{
        this.setState({data: [
          {
            number: 1,
            startAngle: isPos1* Math.PI * 2,
            endAngle: this.state.data[0].endAngle,
        },
        {
            number: 30,
            startAngle: this.state.data[1].startAngle,
            endAngle: this.state.data[1].endAngle,
        },
        {
            number: 1,
            startAngle: -((Math.PI * 2)-this.state.data[1].endAngle),
            endAngle: isPos2* Math.PI * 2,
        },
        ]});
      }



    }

'''

TheSoma300
  • 72
  • 4

0 Answers0