flutter
Use CurveTween instead of CurvedAnimation in docs and samples
@InMatrix commented on Wed Jan 10 2018
The current animation docs teach users to use CurvedAnimation to specify the easing curve of a Tween-based animation. This API is less usable than CurveTween for this use case because it requires the user to declare the animation's controller on a different object after adding the modifying the timing curve of the Tween.
For example, let's say the user has this tween animation specified initially:
animation = new Tween(begin: 0.0, end: 300.0).animate(controller);
She now wants to make it a little more interesting by setting a non-linear easing curve. If she is using the CurvedAnimation, she'd do the following:
animation = new Tween(begin: 0.0, end: 300.0).animate(curve);
curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
But with CurveTween, she don't have to change animate(controller) and won't need to deal with the parent property of the CurvedAnimation object:
animation = new Tween(begin: 0.0, end: 300.0).chain(
new CurveTween(
curve: Curves.easeIn,
)
).animate(controller);
IMO, we should recommend using CurveTween over CurvedAnimation for this use case in our docs.
Cc: @Sfshaza @Hixie @HansMuller
@Sfshaza commented on Tue Jun 12 2018
Excellent feedback!
I'm looking at this right now. I think if we add information and samples to the following pages, that should be enough. So a week of work. I'd advise not touching older recipes, but making sure the newer ones use the updated tween type.
Pages:
- Add new section for CurveTween: https://docs.flutter.dev/ui/animations/tutorial
- Add a new section for CurveTween: https://docs.flutter.dev/ui/animations/staggered-animations#complete-staggered-animation
- Mention CurveTween here:https://docs.flutter.dev/ui/animations/overview
This page has an example usage of CurveTween: https://docs.flutter.dev/cookbook/animation/page-route-animation
That sounds reasonable. If we have any older pages that are out of date, we should consider retiring them.
After more research, it appears that CurvedAnimation and CurveTween were introduced at the same time, but a design decision was made to introduce developers to CurvedAnimation first. My hunch is that this is because CurvedAnimation requires fewer lines with no embedding, so it's slightly easier to read.
Instead of replacing all of our docs and samples, I think we simply need to make sure that we've exposed CurveTween a bit more on these two pages:
- Add new section for CurveTween: https://docs.flutter.dev/ui/animations/tutorial
- Mention CurveTween here:https://docs.flutter.dev/ui/animations/overview
I'm also going to check for other animation methods that we might also want to expose. Also... tutorial.md really isn't a tutorial. I'm going to suggest that we move that content into the overview.