Skip to content

Commit fb43ba8

Browse files
pinkeshmarspinkeshmars
committed
Added rive animation
1 parent 4948f86 commit fb43ba8

File tree

2 files changed

+151
-1
lines changed

2 files changed

+151
-1
lines changed

‎docs/ff-concepts/animations/animations.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Enhancing your app with animations significantly improves the user experience, m
1111
- [**Implicit Animations**](implicit-animations): Animate changes in specific widget properties, such as the height of a Container.
1212
- [**Hero Animations**](hero-animations): Animate a widget that transitions smoothly between screens, also known as shared element transitions.
1313
- [**Page Transition Animations**](page-transition-animations): Specify transitions between pages within your app.
14-
- **Import Animations**: Import animations you've created using other tools such [lottiefiles](https://lottiefiles.com/) and [Rive](https://rive.app/).
14+
- **Import Animations**: Import animations you've created using other tools such [lottiefiles](import-animations/lottie-animation) and [Rive](import-animations/rive-animation).
1515

1616

1717
To learn more about animations in FlutterFlow, check out this video:

‎docs/ff-concepts/animations/import-animations/rive-animation.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
slug: rive-animation
3+
title: Rive Animation
4+
tags: []
5+
description: Learn how to add Rive animation in your FlutterFlow app.
6+
sidebar_position: 2
7+
---
8+
9+
# Rive Animation
10+
[Rive](https://rive.app/) is a real-time interactive design and animation tool. Using the **RiveAnimation** widget you can easily import your Rive assets to FlutterFlow and use them inside your app.
11+
12+
<div style={{
13+
position: 'relative',
14+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
15+
height: 0,
16+
width: '100%'}}>
17+
<iframe
18+
src="https://demo.arcade.software/4J9fgyM4CwQA4tC0HrQ8?embed&show_copy_link=true"
19+
title=""
20+
style={{
21+
position: 'absolute',
22+
top: 0,
23+
left: 0,
24+
width: '100%',
25+
height: '100%',
26+
colorScheme: 'light'
27+
}}
28+
frameborder="0"
29+
loading="lazy"
30+
webkitAllowFullScreen
31+
mozAllowFullScreen
32+
allowFullScreen
33+
allow="clipboard-write">
34+
</iframe>
35+
</div>
36+
<p></p>
37+
38+
## Designing Animation
39+
40+
You can create an animation from scratch by using [Rive Editor](https://editor.rive.app/).
41+
42+
1. Click **+ New File**.
43+
2. Specify the **Artboard dimensions** (Width and Height).
44+
3. Click **Create**.
45+
46+
Use the Rive [design tools](https://help.rive.app/editor/fundamentals/shapes-and-paths) or import image files to start designing your animation. Once your design is ready you can use the [Timeline](https://help.rive.app/editor/animate-mode/timeline) and use keying to easily animate your design.
47+
48+
:::info
49+
You should have at least one [**Artboard**](https://help.rive.app/editor/fundamentals/artboards) inside your Rive file but you can add an infinite amount of Artboards.
50+
:::
51+
52+
53+
After you have completed designing your animation, you can either download it as an asset (having `.riv` extension) or you can share it with others by publishing it to the Rive community.
54+
55+
To download the Rive file, click the **Export icon** (top-left corner of the Rive toolbar), and select **Download -> For newest runtime**.
56+
57+
To publish the file to the community, click the **Export icon** (top-left corner of the Rive toolbar), and select **Publish to Community**. Give a **title** and **description** to your animation and click **Publish to Community**.
58+
59+
:::warning
60+
For using a Rive animation file inside FlutterFlow, you should either download or publish the file to the community.
61+
:::
62+
63+
Instead of creating an animation from scratch, you can also use any Rive asset shared in the [Community](https://rive.app/community/).
64+
65+
## Adding RiveAnimation widget
66+
67+
Follow the steps below to use a Rive animation:
68+
69+
1. Drag and drop the **RiveAnimation** widget onto the canvas.
70+
2. Select the **Animation Source** as either ***Network*** or ***Asset***.
71+
3. If you have selected ***Network***, enter the **Path** (download URL) ****of the animation. Get the path by navigating to the Rive animation published in the community, right-click on the **Download** button and copy the link address.
72+
4. If you have selected ***Asset***,
73+
5. Choose an **Artboard** from the dropdown list.
74+
6. Select the **Animations** that you want to use (these are imported from the Rive asset). After selecting one or more animation(s), you can use the **Preview Animations** button to play it.
75+
7. The **Animation Type** is selected as ***Once*** by default. If the selected animations contain a loop or boomerang, you will have an option to select ***Continuous***. On choosing this option, if the animation contains a loop it will play continuously.
76+
8. By default, the **Auto Animate** checkbox remains checked, which means that the animation will play as soon as the page loads. But if you want to use an Action to trigger the animation, uncheck this.
77+
9. Specify the **Width** and **Height** of the RiveAnimation widget, and select a **Box Fit** type.
78+
10. (Optional) If you plan to use an Action to trigger the animation, you can give an appropriate **Name** to this *RiveAnimation* widget for it to be easily identifiable.
79+
80+
<div style={{
81+
position: 'relative',
82+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
83+
height: 0,
84+
width: '100%'}}>
85+
<iframe
86+
src="https://demo.arcade.software/rbKXOTaDS8aVCS26oeS0?embed&show_copy_link=true"
87+
title=""
88+
style={{
89+
position: 'absolute',
90+
top: 0,
91+
left: 0,
92+
width: '100%',
93+
height: '100%',
94+
colorScheme: 'light'
95+
}}
96+
frameborder="0"
97+
loading="lazy"
98+
webkitAllowFullScreen
99+
mozAllowFullScreen
100+
allowFullScreen
101+
allow="clipboard-write">
102+
</iframe>
103+
</div>
104+
<p></p>
105+
106+
## Control animation using action
107+
108+
To trigger a RiveAnimation to start playing using an Action, you can use the **Rive** **Animation Action**.
109+
110+
### Adding Rive Animation [Action]
111+
112+
Follow the steps below to define an action to start the animation:
113+
114+
1. Select the **widget** (eg., `Button`) on which you want to define the action.
115+
2. Select **Actions** from the Properties panel.
116+
3. Click **+ Add Action** button.
117+
4. Choose a gesture from the dropdown among **On Tap, On Double Tap,** or **On Long Press**.
118+
5. Select the **Action Type** as ***Animation**.*
119+
6. Set **Choose Animation Type** to ***Rive Animation***.
120+
7. Under **Choose Rive Animation**, select the `RiveAnimation` widget (If you have given your `RiveAnimation` widget a name, that will be displayed here).
121+
122+
:::info
123+
You should have the **Auto Animate** unchecked inside the properties of `RiveAnimation` widget to take advantage of this action.
124+
:::
125+
126+
<div style={{
127+
position: 'relative',
128+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
129+
height: 0,
130+
width: '100%'}}>
131+
<iframe
132+
src="https://demo.arcade.software/J2r1YaFGhp1CbmEcfBpl?embed&show_copy_link=true"
133+
title=""
134+
style={{
135+
position: 'absolute',
136+
top: 0,
137+
left: 0,
138+
width: '100%',
139+
height: '100%',
140+
colorScheme: 'light'
141+
}}
142+
frameborder="0"
143+
loading="lazy"
144+
webkitAllowFullScreen
145+
mozAllowFullScreen
146+
allowFullScreen
147+
allow="clipboard-write">
148+
</iframe>
149+
</div>
150+
<p></p>

0 commit comments

Comments
 (0)