Visitar URL original
[animations] README updates (#90) · flutter/packages@6f5fc58 · GitHub
Skip to content

Commit 6f5fc58

Browse files
author
Shi-Hao Hong
authored
[animations] README updates (#90)
* Update README with new examples * Add pointer to the sample app in README * Remove heavy development notice on README
1 parent 4a3f1fd commit 6f5fc58

13 files changed

Lines changed: 41 additions & 7 deletions

‎packages/animations/README.md‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,50 @@
11
# Fancy pre-built Animations for Flutter
22

3-
**This package is still under heavy development and may change frequently.**
4-
53
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.
64

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+
712
## Available Animations
813

914
Currently, the following animated effects are available in this library:
1015

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+
|![Open Container Card Fade Transition Demo](example/demo_gifs/open_container_fade_card_demo.gif)|![Open Container Card Fade Through Transition Demo](example/demo_gifs/open_container_fade_through_card_demo.gif)
23+
| **Floating Action Button with Fade Transition** | **Floating Action Button with Fade Through Transition** |
24+
|![Open Container Card Fade Transition Demo](example/demo_gifs/open_container_fade_floating_action_button_demo.gif)|![Open Container Floating Action Button Fade Through Transition Demo](example/demo_gifs/open_container_fade_through_floating_action_button_demo.gif)
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+
|![Shared Axis Horizontal Transition Demo](example/demo_gifs/shared_axis_horizontal_demo.gif)|![Shared Axis Vertical Transition Demo](example/demo_gifs/shared_axis_vertical_demo.gif)|![Shared Axis Scaled Transition Demo](example/demo_gifs/shared_axis_scaled_demo.gif)
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+
|![Fade Through Transition Demo](example/demo_gifs/fade_through_demo.gif)|
42+
43+
### Material's Fade Transition
1244

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.
1447

15-
*TODO(goderbauer): Add example videos of this effect.*
48+
| Modal Fade Transition | Floating Action Button Fade Transition |
49+
:----------------------------------:|:----------------------------------------:
50+
|![Fade Modal Transition Demo](example/demo_gifs/fade_modal_demo.gif)|![Fade Floating Action Button Transition Demo](example/demo_gifs/fade_floating_action_button_demo.gif)
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
# Example Catalog fir package:animations.
1+
# Example Catalog for package:animations.
22

33
Run `flutter run --release` in this directory to launch the catalog on a device.
74.4 KB
Loading
179 KB
Loading
319 KB
Loading
533 KB
Loading
540 KB
Loading
503 KB
Loading
549 KB
Loading
261 KB
Loading

0 commit comments

Comments
 (0)