Sorry, we don't support your browser.  Install a modern browser

How can I create progress animation that will stop dou to input?#576

Hi!
I want to have an animation of filling a bottle. I want my developers to be able to give it a parameter of precetange - for example fill half way of the bottle, 50%.
All conditions I see are for transaction between animation, and doesn’t get into the animation.
What do you suggest me to do?

Thanks!

13 days ago

Hi Noa, thanks for reaching out!

A blend state would be best way to achieve what you’re describing. You can start by creating 2 animations – one that keyframes the bottle in an empty state, and another that keyframes the bottle in a full state. Note that each animation on its own won’t change anything. We’ll just blend between the two of them in the State Machine.

With the animations setup, you can create a new State Machine. Create a new state, set it to an additive blend, then add both animations. You can then create some inputs to control the mix between them. Ideally we would only have a single input that we can use to control the fill amount, however due to the way the state machine works under the hood we need to add a second input just to anchor the empty animation. This might seem unnecessary, however it ensures the value and the fill amount align correctly. We’re working on some improvements to avoid having to create this second input in future!

In the runtime, your developer will be able to provide a value for the ‘fill’ input to dynamically control it.

I’ve created a short video demonstrating the steps I mentioned above as well as the file itself (You can drag it onto an empty Rive document to open). You can also learn more about blend states via our Help Center here.

I hope this helps!

Alex

13 days ago