Learn how to create an animated pull-to-refresh using Rive

foreign so here in the editor let's go ahead and take a look at the animations we need to use to put this pull to refresh sequence together so down here in the animations panel we'll start from the bottom and first we've got this idle intro animation and this is the start of our pull sequence so all of these Keys represent the essentially the start of this animation and when we look at this intro animation this is actually the end of that pull sequence so we're going to be using a 1D blend state to essentially mix between these two animations and we'll show more about that when we get to the state machine portion so just keep in mind that this is our the start of our animation and if we go ahead and turn these off you can see this is how the bow and arrow and Target will start and this is the positions and keys when we end that pull sequence okay so let's move on to the next animation which is this strain Loop and this animation will trigger when the user is pulled down far enough on the UI so this will give them some visual feedback that they can go ahead and release the UI so once we release that we'll jump into the shoot animation and here we're just essentially setting up an animation that we can transition between this strain Loop and then the arrow fly Loop so this animation will serve as kind of an indeterminate loading State while the data is being updated in the background and we're waiting for the UI to refresh this will play until that happens and once that's all completed we'll then move from this Arrow fly Loop into this Arrow hit animation which will kind of finish off the whole pulse refresh sequence so let's take a look at that now you can see we've just got the arrow finally hitting the target and some birds fly out of the bushes here so those are the core animations for the pull to refresh sequence uh we do have one last animation that's just a idle ambient animation so these this tree and these bushes will kind of play like this throughout the whole sequence so that's all the animations for the pull the refresh sequence in the next video we'll take a look at how to pull all of these together into a state machine and set up the interactivity

Channel: Rive

Views: 3,605

Keywords: rive, animation, interactive animation, pull-to-refresh, pull to refresh, custom scroll animation, flutter, tutorial, flutter dev, state machine

Id: ARWBi5MGYko

Length: 3min 1sec (181 seconds)

Published: Fri Jun 16 2023