State Machine
Add intelligence to your animations
State Machines are a visual way to connect animations together and define the logic that drives the transitions. They allow you to build interactive motion graphics that are ready to be implemented in your product, game, or website.
State machines create a new level of collaboration between designers and developers, allowing both teams to iterate deep in the development process without the need for a complicated handoff.
To get started, you first need some timeline-based animations.
Then create a State Machine.
With the State Machine selected, drag and drop your animations onto the graph on the right.
Drag and drop animations on the graph to create states
Connect your new states with Transitions. When you hover near a state, you'll see a dot appear. Click and drag on that dot to draw a transition from one state to another. The transition from the Entry state defines which state should play first. A transition from the Any State will happen regardless of what state is currently active, provided the conditions on that transition are met (read below for more on conditions). A transition to the Exit state will exit the State Machine.
Create transitions
Before adding logic to Transitions, you need to create at least one Input. Inputs are values that are controlled by your app or game engine.
Think of them as the contract between your design and engineering teams. Your product's code can change the values of the Inputs at any time, and the State Machine reacts to those changes.
You can change these values while the State Machine is playing in the Editor or at runtime in your app, game, or website. In this case, we're going to use this Input to determine when a button is pressed, so we're going to name it "Pressed."
Create an Input
Select a transition to view its properties.
Duration determines how long the two animations (in this case Idle and Press) will mix. A value of 0 has no mixing and instantly changes from one state to the next. Duration can be a fixed time value (milliseconds or seconds) or it can be a percentage (based on the length of the beginning state).
Exit Time determines how much time must pass before the transition can happen (even if the conditions have already been met). This can be useful if you have an animation that needs to reach a specific point before it transitions. You can use time values (milliseconds or seconds) or a percentage. A value of 100% means that the transition can only happen once the entire animation has played.
Use Pause When Exiting if you want to hold the current frame (of the beginning state) when the transition started.
A transition can have no conditions, one condition, or multiple conditions. If it has no conditions, then the transition happens as soon as Exit Time has been reached. If a transition has any condition, then all conditions must be met before the transition happens.
Use the Input you created to drive a condition
If you have Exit Time enabled, then the transition happens once all conditions are met and the exit time has been reached. Use this to ensure your transition happens at a specific time of your animation.
Press the play button to start the State Machine. Change the Inputs to test how your State Machine responds.
A Blend State allows you to mix animations together on the same state. You can use this to create all kinds of interesting interactions, like pull-to-refresh animations, creative loading bars, facial expressions, or to control the walk/run speed of a character.
Using a Blend State to make the water rise in this download button.
To make a Blend State, select a state and use the toggle to change the type. Rive currently supports three types of state:
- Animation State
- 1D Blend State
- Additive Blend State
A 1D Blend State allows you to blend animations using a number input. After choosing the blend type, you'll want to pick which input will control this blend state.
Then add animations with the plus button and set the threshold for each. The thresholds for each animation determine the range of your Blend State. In our example, the range is from 0 to 100. That means that one animation is playing fully at each end of the range, while anything in between is a blend of both animations. You can see this represented in the diagram above the animations list. As you change the input value, watch to see how the position in this range changes the mix amount of each animation.
An Additive Blend State allows you to map any input directly to any animation. The Additive Blend State expects a number between 0-100 (which defines whether 0% of the animation is playing or if 100% of the animation is playing). This can be useful if you want to have exact control over animations, rather than blending them indirectly with a single input.
A state machine layer can have only one active state at a time. Add more layers to play multiple states simultaneously.
Listeners allow you to detect clicks and hovers to change a State Machine's Inputs. That means designers and animators can create interactivity directly in the Rive Editor without writing code.
Create a new listener by expanding the Listeners tab and hitting the plus button.
A listener requires you to configure it before it will work by adding a target, listener type, and the input you want it to manipulate.
A target tells the listener what object needs to be interacted with to manipulate an input. Listeners can target any object in the artboard.
Tip: if you have an object selected when you create a listener, that object will automatically be configured as your target.
The Listener Type dropdown determines what pointer action it should respond to.
The current list of listeners are:
- Pointer down- click/tap down
- Pointer up - click/tap up
- Pointer enter - pointer enters the target area
- Pointer exit - pointer exits the target area
- Pointer move - pointer moves in the target area
Listener actions determine what to do when the listener parameters are met.
Input Change
Tells the listener to change the desired input when conditions are met.
Align Target
Aligns the target with the mouse cursor.
Last modified 6mo ago