Hello!
Although I am pretty much done with my project, I would like to allow a smoother transition when flipping tiles over. At the moment, when a tile is clicked/clicked again, its rotation is instantly changed due to conditional rendering. I was thinking of using useFrame to allow that transition from one rotation to another, but I am unsure of how to go about it.
If you have any suggestions on a way to do this, please let me know.
Thank you.
For me, the simplest way is to use lerp
But there are other ways, such as Tween, pmndrs/maath and React Spring
lerp works well for a single axis, at most two if you’re lucky, any more complex rotation and you’ll get some weird transitions, that’s why unlike Vector3, Euler doesn’t have a lerp function.
As an alternative, you can use Quaternion.slerp, set your target rotation/quaternion and play with the interpolation factor t.
i would use unity damp GitHub - pmndrs/maath: 🪶 Math helpers for the rest of us
lerp is not interruptible/velocity based, it has problems rendering interactive animation, or anything that can change course. flip tile up, and while it’s animation you click it again, lerp will run the same time based animation again resulting in a sudden halt and a jerky movement back to origin. with velocity it will approach peak, expend energy, and then zip back.
https://codesandbox.io/p/sandbox/unity-damping-4hbn17?file=%2Fsrc%2FApp.js