Skip to content

Fix Bottom Sheet linear animations - #26825

Closed
marcoms wants to merge 19 commits into
flutter:masterfrom
marcoms:bottom-sheet-curve
Closed

marcoms wants to merge 19 commits into
flutter:masterfrom
marcoms:bottom-sheet-curve

Conversation

@marcoms

@marcoms marcoms commented Jan 20, 2019 •

Copy link
Copy Markdown
Contributor

Boy, this was a hard one 😅 This PR eases the enter and exit transitions for bottom sheets, while also preserving regular dragging behavior.

TODO:

  • showModalBottomSheet
  • showBottomSheet

@marcoms marcoms changed the title Bottom sheet curve Fix Bottom Sheet linear animations Jan 20, 2019
@zoechi zoechi added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages labels Jan 21, 2019
@marcoms

marcoms commented Jan 21, 2019

Copy link
Copy Markdown
Contributor Author

Just completed the necessary work for persistent bottom sheets.

@HansMuller I referred to the online Material spec for animation values again. If anything seems off or if there are updated animations internally let me know

@zoechi
zoechi requested a review from a14n January 21, 2019 19:48
@zoechi zoechi added the a: animation Animation APIs label Jan 21, 2019
@HansMuller

Copy link
Copy Markdown
Contributor

Here are the latest bottom sheet motion specs. As always, it's a shame that the material motion specs aren't public. I don't know why they're not public.

Overall duration open/close: 250ms
Vertical motion curve is fastOutSlowIn
Existing content fades out for 83ms starting at t=0, curve is linear
Existing content fades in for the remaining 167ms, curve is linear

@HansMuller HansMuller left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This appears to be a nice improvement however I'm having some trouble with the curve definition.

Comment thread packages/flutter/lib/src/animation/curves.dart Outdated
Comment thread packages/flutter/lib/src/animation/curves.dart Outdated
/// A curve that progresses linearly until a specified [startingPoint], at which
/// point [curve] will begin. Unlike [Interval], [curve] will not start at zero,
/// but will use [startingPoint] as the Y position.
class SuspendedCurve extends Curve {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This combination of a linear curve followed by an arbitrary one seems particularly suited to drag then fling situations (otherwise it's difficult to understand what motivated this particular combination). Some typical usage information would be helpful here.

The curves are documented with animated diagrams which may be more than what you want to do here. For now, rather than making this a general purpose class, maybe just add _SuspendedCurve to bottom_sheet.dart.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expanded in the class docs with the new commits.

I wasn't able to keep SuspendedCurve private in bottom_sheet.dart, since it is also used in scaffold.dart for persistent bottom sheets, so I moved it to bottom_sheet.dart and renamed it as BottomSheetSuspendedCurve.


final double curveProgress = (t - startingPoint) / (1 - startingPoint);
final double transformed = curve.transform(curveProgress);
return lerpDouble(startingPoint, 1, transformed);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the class doc I was't able to understand exactly how the linear curve would segue to the curve parameter.

Using the curve to sample a line from startingPoint to 1.0 seems reasonable, but to verify that it's correct is hard to do without definition of what the curved part of suspended curve is supposed to mean.

@marcoms

marcoms commented Jan 24, 2019

Copy link
Copy Markdown
Contributor Author

Existing content fades out for 83ms starting at t=0, curve is linear
Existing content fades in for the remaining 167ms, curve is linear

I wasn't able to adjust the animation for the scrim, since it appears to be hardcoded in routes.dart unfortunately

@dnfield dnfield left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs test(s) before it could be merged. The existing CI failure seems like a flake though.

Would you be able to add some tests for this?

@dnfield

dnfield commented Aug 15, 2019

Copy link
Copy Markdown
Contributor

Same comment here as on the other one - this has had no activity in some time now, needs tests, and needs to be synchronized up to HEAD. Please feel free to re-open once some of that has been addressed.

@dnfield dnfield closed this Aug 15, 2019
@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Aug 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

a: animation Animation APIs framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants