Continously rotating without jumps between tours

[ethanruiyu]

Hi, all.

I found the problem I'm facing in issues, but i didn't find the answer.

issues: #1487

Borrow @korbav codesandbox: https://codesandbox.io/s/twilight-http-l0jm0?file=/src/App.js

As you can see, It will rebound at 0deg - 360deg

iShot2021-11-18.00.15.42.mov

like this, I want to keep control of the angle.

It bothered me for a long time 😭

[joshuaellis]

That sandbox uses react-motion not react-spring.

[ethanruiyu]

The original value is from the hardware sensor, which gives a range of 0-360, and the next value is random (because we can't predict sensor position and orientation).

[joshuaellis]

So how do you know if it goes from 358 to 4 they've travelled clockwise? It's a tricky situation because you're trying to go against how CSS works.

If you know the direction you could safely do the following:

• current value is 358
• next value is 4 (we're going clockwise)
• diff = 6
• transition to 358 + 6 = 364
• onRest handler animate to 4 with either immediate = true or api.set
• Spring is at 4 ready for new value between 0-360

You can reverse that calc logic if they're going counter-clockwise. Given the complexities of the animation you're trying to achieve I would use the imperative API.

[ethanruiyu]

Sensor reporting frequency is very fast (5Hz), the difference between two consecutive frames is not very big, so 358-4 must be rotating at a small Angle (to determine the direction of rotation).

The idea you mentioned looks great. I could try it, but it might be slow because I'm new to React-Spring😅

[joshuaellis]

Write your spring like this:

const [styles, api] = useSpring(() => {
  rotateX: 0,
  // initial-styles
},[])

then when you get a state update run a useLayoutEffect/useEffect:

useLayoutEffect(() => {
 // old val could be 358 and new val 4
  const [direction, hasValueDoneRotation] = findDirection(oldVal, newVal)
  // normal change
if(!hasValueDoneRotation){
   api.start({
    rotateX: newRotateX
  })
}
  if(hasValueDoneRotation && direction === 'right'){
    const actualRotationValue = X // this could be 364
    
    api.start({
      rotateX: actualRotationValue,
      onRest: () => {
        api.set({
          // this would be 4
          rotateX: newVal
          })
       }
    })
  }
},[someState])

Sorry about the formatting, but it should look something like that.

[ethanruiyu]

https://codesandbox.io/s/condescending-euclid-imzmx?file=/src/App.js

This seems to solve the most basic problem, but it doesn't seem to be ideal, and I can't think of a better way.

[raycaster08]

Modify the original value based on the difference
https://codesandbox.io/s/flamboyant-ioana-5zems1?file=/src/App.js

[ethanruiyu]

nice fix