This action can be used to trigger the Rive animation inside your FlutterFlow app.
Rive Teddy's hands-up animation in action
Follow the steps below to define an action to start the animation:
- 1.Select the widget (eg.,
Button) on which you want to define the action.
- 3.Click + Add Action button.
- 4.Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
- 5.Select the Action Type as Animation.
- 6.Set Choose Animation Type to Rive Animation.
- 7.Under Choose Rive Animation, select the
RiveAnimationwidget (If you have given your
RiveAnimationwidget a name, that will be displayed here).
You should have the Auto Animate unchecked inside the properties of
RiveAnimationwidget to take advantage of this action.
You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
All the values to be used for the animation are stored inside the
setupTriggerAnimationsmethod is used for initializing the widget animations:
AnimationControlleris retrieved from the
animationsMapvariable. To start the animation
forward()method is called on the controller:
The controllers for the Rive animation are initialized inside the
The name of the animations are stored inside the
teddyAnimationAnimationsListvariable (in this case there is only one animation present), and the controllers are stored inside the
Then the controllers are used to start the animation as the user taps the button. The generated code for the Rive Animation action can be viewed by selecting the button on which the action is added:
controller.reactivateis set to
truein order to start/restart the animation.