docs: Add new 'Animating widgets' how-to guide. #283
Conversation
| output: web | ||
|
|
||
| - title: Animate Widgets | ||
| url: /animating-widgets/ |
There was a problem hiding this comment.
Probably the title and URL should match.
There was a problem hiding this comment.
The titles in the sidebar (left-nav) are shortened by design, to make them easier to scan. The full title ('Animating Widgets') is shown when users open the link to that page.
| available. | ||
|
|
||
| The [`flutter/animation`](https://docs.flutter.io/flutter/animation/animation-library.html) | ||
| package in the Flutter SDK provides APIs to create animation effects in user |
There was a problem hiding this comment.
Technically animation is a library rather than a package.
There was a problem hiding this comment.
changed to "library".
| time) as it runs. | ||
|
|
||
| Based on the animation object’s properties at a specific frame, Flutter | ||
| dynamically modifies your widget visual appearence, and rebuilds the widget |
| To learn more about | ||
| using the other key classes in the | ||
| [`flutter/animation`](https://docs.flutter.io/flutter/animation/animation-library.html) | ||
| package, see the [Animations in Flutter](/animations) guide. |
|
|
||
| To render your widget with an animation, set one or more of the widget’s | ||
| members to the animation object, then use the animation’s value to decide how | ||
| to draw your object. |
There was a problem hiding this comment.
draw is kind of an unusual case. It's much more common to use the animation's value to decide how to build child widgets.
| You can also specify a progression between two colors. For example: | ||
|
|
||
| ```dart | ||
| final Tween colorTween = |
There was a problem hiding this comment.
I'd drop the final from all these example. Here I'd use the more specific ColorTween type.
| interpolates between the double values of -200.0 to 0.0. | ||
|
|
||
| ```dart | ||
| final Tween doubleTween = new Tween<double>(begin: -200.0, end: 0.0); |
There was a problem hiding this comment.
Dropping the type parameter here is dodgy. Better to keep it in.
| new ColorTween(begin: Colors.transparent, end: Colors.black54); | ||
| ``` | ||
|
|
||
| To apply a Tween to a given animation object, use the [`animate()`]() |
| Animation<int> alpha = new IntTween( | ||
| begin: 0, | ||
| end: 255) |
There was a problem hiding this comment.
This whitespace is odd. I'd just put it all on one line.
| useful for widgets that are already listening to the animation and hence | ||
| rebuilding whenever the animation changes value. | ||
| + [`animate()`](http://docs.flutter.io/flutter/animation/Animatable/animate.html) | ||
| Animates the tween based on the animation object's properties. Rather than |
There was a problem hiding this comment.
Inconsistent indent between these two bullets.
| height: animation.value, | ||
| width: animation.value, | ||
| child: new AssetImage( | ||
| name: 'assets/flutter_logo.png', |
There was a problem hiding this comment.
Why were these changed from web-based images to local images? With web-based images, readers can copy and paste the examples and they'll work. With local examples, readers have to create a project with the directory structure exactly right, and get the flutter.yaml file right, none of which is shown here. This was identified during usability testing of the original examples.
|
This PR has a dependency on flutter/flutter#1322 for improved animation code samples. |
|
@sethladd maybe you can find a new owner for this? |
|
Closing as stale. We can reopen if a new owner is found. |
5 participants
Staged preview:
@abarth @HansMuller ptal.