Animate size of label text over text fields. #7241
Conversation
|
LGTM |
|
This needs a test. @mpcomplete Did you check how this looks? Often animating font-size looks terrible because of snapping in the font hinting, and we end up wanting to animate the transform instead. |
|
@Hixie yes, there's snapping (though I didn't notice it until I slowed down animations). That seems like a deficiency of AnimatedDefaultTextStyle. Can we fix that instead of introducing a transform here? |
|
What's going on is that fonts are not pure vectors, they're programs that snap to pixel boundaries based on their font size (this is known as hinting). So as you change the font size, the underlying vectors change in a non-linear fashion. Basically, animating the font size is not the same as animating the text growing. |
|
Right - but AnimatedDefaultTextStyle exists, and will happily animate between font sizes. We should figure out how to make that look good (or don't try, and explicitly note that it shouldn't be used for font size changes) |
|
Documenting it is certainly a good idea. |
|
Here's another version that smoothly interpolates between the 2 font sizes using a Transform. Working on a test, but I wanted to get your feedback @Hixie to see if you liked this approach. I'm adding a I also added a fade-in to the hintText, so it doesn't pop in immediately on top of the label while that animates out of the way. |
| @@ -184,6 +189,13 @@ class Text extends StatelessWidget { | |||
| text: data | |||
| ) | |||
| ); | |||
| if (scale != 1.0) { | |||
There was a problem hiding this comment.
this will only work for single-line text. There's not really a good way to do this for multiline text (which RichText in general supports).
|
I'm a little skeptical about adding a transform to RichText for this, because it will have really weird effects on multiline text. @abarth may have another opinion, I'd be curious to hear what he thinks. |
|
I don't think we should add a Transform to RichText. Instead, we should do something more specific to input field animations. |
Also fade in the hintText so it doesn't pop in immediately as the label text slides up. Fixes #7217
|
OK, the label animation is now local to input.dart. As for a test: this patch makes the animation "look better". That's not really something I can test via automation. I can test that there is now an animation, but that seems oddly specific and not really in the spirit of an automated test. WDYT? |
|
What are you worried I'll accidentally regress when I walk into this code like a bull in a china shop? Test that. :-) |
|
Added a test. |
|
LGTM |
Fixes #7217