|
1 | 1 | # Animation Samples
|
2 |
| -Sample apps that showcasing Flutter's animation features |
| 2 | +Sample apps that showcase Flutter's animation features |
3 | 3 |
|
4 | 4 | ## Goals
|
5 | 5 |
|
6 |
| -- Demonstrate the building blocks for animations and how they work together |
7 |
| -- Provide samples for common patterns and use-cases |
| 6 | +- Demonstrate the building blocks for animations and how they work together. |
| 7 | +- Provide samples for common patterns and use-cases. |
8 | 8 |
|
9 | 9 | ## Samples
|
10 | 10 |
|
11 | 11 | ### Basics
|
12 | 12 |
|
13 | 13 | Building blocks and patterns
|
14 | 14 |
|
15 |
| -1. **AnimatedContainerDemo** Demonstrates how to use `AnimatedContainer`. |
16 |
| -2. **PageRouteBuilderDemo** Demonstrates how to use `Tween` and `Animation` to |
17 |
| -*build a custom page route transition. |
18 |
| -3. **AnimationControllerDemo** Demonstrates how to use an `AnimationController`. |
19 |
| -4. **TweenDemo** Demonstrates how to use a `Tween` with an |
20 |
| -`AnimationController`. |
21 |
| -5. **AnimatedBuilderDemo** Demonstrates how to use an `AnimatedBuilder` with an |
22 |
| -`AnimationController`. |
23 |
| -6. **CustomTweenDemo** Demonstrates how to extend `Tween`. |
24 |
| -7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a |
25 |
| -button that changes between different colors. |
26 |
| -8. **FadeTransitionDemo** Demonstrates how to use `FadeTransition`. |
27 |
| -9. **AnimatedPositionedDemo** Demonstrates how to use `AnimatedPositioned`. |
28 |
| -10. **AnimatedSwitcherDemo** Demonstrates how to use `AnimatedSwitcher`. |
| 15 | +1. **AnimatedContainerDemo**: Demonstrates how to use `AnimatedContainer`. |
| 16 | +2. **PageRouteBuilderDemo**: Demonstrates how to use `Tween` and `Animation` to |
| 17 | + build a custom page route transition. |
| 18 | +3. **AnimationControllerDemo**: Demonstrates how to use an |
| 19 | + `AnimationController`. |
| 20 | +4. **TweenDemo**: Demonstrates how to use a `Tween` with an |
| 21 | + `AnimationController`. |
| 22 | +5. **AnimatedBuilderDemo**: Demonstrates how to use an `AnimatedBuilder` with an |
| 23 | + `AnimationController`. |
| 24 | +6. **CustomTweenDemo**: Demonstrates how to extend `Tween`. |
| 25 | +7. **TweenSequenceDemo**: Demonstrates how to use `TweenSequence` to build a |
| 26 | + button that changes between different colors. |
| 27 | +8. **FadeTransitionDemo**: Demonstrates how to use `FadeTransition`. |
29 | 28 |
|
30 | 29 | ### Misc
|
31 | 30 |
|
32 | 31 | Other uses-cases and examples
|
33 | 32 |
|
34 |
| -- **RepeatingAnimationDemo** Demonstrates how to repeat an animation. |
35 |
| -- **ExpandCardDemo** Demonstrates how to use `AnimatedCrossFade` to fade between |
36 |
| -two widgets and change the size. |
37 |
| -- **CarouselDemo** Demonstrates how to use `PageView` with a custom animation. |
38 |
| -- **FocusImageDemo** Demonstrates how to measure the size of a widget and expand |
39 |
| -it using a `PageRouteBuilder`. |
40 |
| -- **PhysicsCardDragDemo** Demonstrates how to run an AnimationController with a |
41 |
| -spring simulation. |
42 |
| -- **CardSwipeDemo** A swipeable card that demonstrates how to use gesture |
43 |
| -detection to drive an animation. |
44 |
| -- **AnimatedList** Demonstrates how to use `AnimatedList`. |
45 |
| -- **HeroAnimationDemo** Demonstrates how to use `Hero` animation. |
46 |
| -- **CurvedAnimationDemo** Demonstrates how to use different curves in `CurvedAnimation`. |
| 33 | +- **RepeatingAnimationDemo**: Demonstrates how to repeat an animation. |
| 34 | +- **ExpandCardDemo**: Demonstrates how to use `AnimatedCrossFade` to fade |
| 35 | + between two widgets and change the size. |
| 36 | +- **CarouselDemo**: Demonstrates how to use `PageView` with a custom animation. |
| 37 | +- **FocusImageDemo**: Demonstrates how to measure the size of a widget and |
| 38 | + expand it using a `PageRouteBuilder`. |
| 39 | +- **PhysicsCardDragDemo**: Demonstrates how to run an AnimationController with a |
| 40 | + spring simulation. |
| 41 | +- **CardSwipeDemo**: A swipeable card that demonstrates how to use gesture |
| 42 | + detection to drive an animation. |
| 43 | +- **AnimatedList**: Demonstrates how to use `AnimatedList`. |
| 44 | +- **AnimatedPositionedDemo**: Demonstrates how to use `AnimatedPositioned`. |
| 45 | +- **AnimatedSwitcherDemo**: Demonstrates how to use `AnimatedSwitcher`. |
| 46 | +- **HeroAnimationDemo**: Demonstrates how to use `Hero` animation. |
| 47 | +- **CurvedAnimationDemo**: Demonstrates how to use different curves in |
| 48 | + `CurvedAnimation`. |
47 | 49 |
|
48 | 50 | ## Other Resources
|
49 | 51 |
|
50 | 52 | - [Introduction to animations](https://flutter.dev/docs/development/ui/animations)
|
51 | 53 | - [Animation widgets](https://flutter.dev/docs/development/ui/widgets/animation)
|
52 | 54 | - [Flutter cookbook - Animations](https://flutter.dev/docs/cookbook/animation)
|
53 | 55 | - [Animations tutorial](https://flutter.dev/docs/development/ui/animations/tutorial)
|
| 56 | +- [Implicit animation codelab](https://flutter.dev/docs/codelabs/implicit-animations) |
0 commit comments