|
1 | 1 | # Fancy pre-built Animations for Flutter |
2 | 2 |
|
3 | | -**This package is still under heavy development and may change frequently.** |
4 | | - |
5 | 3 | This package contains pre-canned animations for commonly-desired effects. The animations can be customized with your content and dropped into your application to delight your users. |
6 | 4 |
|
| 5 | +To see examples of the following animations on a device or simulator: |
| 6 | + |
| 7 | +```bash |
| 8 | +cd example/ |
| 9 | +flutter run --release |
| 10 | +``` |
| 11 | + |
7 | 12 | ## Available Animations |
8 | 13 |
|
9 | 14 | Currently, the following animated effects are available in this library: |
10 | 15 |
|
11 | | -### Material's [Open Container Transitions](https://material.io/design/motion/choreography.html#transformation) |
| 16 | +### Material's Open Container Transitions |
| 17 | + |
| 18 | +Tapping on a container (e.g. a card or a button) will expand the container to reveal more information. |
| 19 | + |
| 20 | +| Card with Fade Transition | Card with Fade Through Transition | |
| 21 | +:------------------------------------:|:------------------------------------: |
| 22 | +|| |
| 23 | +| **Floating Action Button with Fade Transition** | **Floating Action Button with Fade Through Transition** | |
| 24 | +|| |
| 25 | +### Material's Shared Axis Transitions |
| 26 | + |
| 27 | +A transition animation between UI elements that have a spatial or navigational |
| 28 | +relationship. |
| 29 | + |
| 30 | +| Horizontal (x-axis) | Vertical (y-axis) | Scaled (z-axis) | |
| 31 | +:-------------------------:|:-----------------------:|:--------------------:| |
| 32 | +||| |
| 33 | + |
| 34 | +### Material's Fade Through Transition |
| 35 | + |
| 36 | +A transition animation between UI elements that have do not have a strong |
| 37 | +relationship to one another. |
| 38 | + |
| 39 | +| Fade Through Page Transition | |
| 40 | +:-----------------------------:| |
| 41 | +|| |
| 42 | + |
| 43 | +### Material's Fade Transition |
12 | 44 |
|
13 | | -Tapping on a container (e.g. a card or a button) will expand the container to reveal more information. |
| 45 | +The fade pattern is used for UI elements that enter or exit from within |
| 46 | +the screen bounds. |
14 | 47 |
|
15 | | -*TODO(goderbauer): Add example videos of this effect.* |
| 48 | +| Modal Fade Transition | Floating Action Button Fade Transition | |
| 49 | +:----------------------------------:|:----------------------------------------: |
| 50 | +|| |
0 commit comments