How to animate with Gyroscope?
How do I set up the Animation in Rive so that I can use the phone's Gyroscope in Android and iPhones? Is there any documentation I can look at? Do I need to set up and Bones or Inputs?
Yes, this is possible by passing number values into your Rive graphic via inputs: https://rive.app/community/doc/state-machines/docxeznG7iiK
Here's how you can use inputs to control your animations: https://rive.app/community/doc/inputs/docwgNrq7ssz
Can you elaborate. How exactly do I need to set up the inputs and state machine?
It really depends on what you're trying to achieve. Can you tell me exactly what you're trying to do?
Sorry for not being clear, we are trying to achieve something very similar to this. https://60fps.design/shots/cred-invite-card-gyroscope
Here's roughly what I would do.
Create a timeline for the tilt left and the tilt right positions. Ex:
tiltRight
might look like this:Create a number input called
horizontalTilt
.Add a layer to your state machine with a blend state between the
leftTilt
andrightTilt
timelines that is controlled byhorizontalTilt
. If you play your animation, changing the input ofhorizontalTilt
should simulate rotating your phone right and left.Repeat these steps for vertical tilt as well. Now playing your animation and updating the
horizontalTilt
andverticalTilt
values should simulate rotating your phone up/down/left/right.Debugging: Let's say for example that your shadow moves up and down correctly, but doesn't move left/right. That probably means there's something in your up/down timelines that's overriding your left/right animation. Double check that there are only keys for the x position of the shadow in the left/right timelines, not the up/down ones.
Inside your code, listen for the devices orientation. Here's a very basic JS example:
function handleOrientation(event) { let alpha = event.alpha; // Rotation around Z-axis let beta = event.beta; // Rotation around Y-axis (tilt front-back) let gamma = event.gamma; // Rotation around X-axis (tilt left-right) // Add logic to convert rotation to input value // Ex: https://stackoverflow.com/questions/69216465/the-simplest-way-to-solve-gimbal-lock-when-using-deviceorientation-events-in-jav // Set your horizontalTilt input value based on the phone's orientation } window.addEventListener("deviceorientation", handleOrientation, true);