| commit | 28c67afbb634bff93acece51805bdfd8e0dc2ef5 | [log] [tgz] |
|---|---|---|
| author | Bernardo Ferrari <bernaferrari2@gmail.com> | Tue Mar 11 04:44:29 2025 -0300 |
| committer | dart-internal-monorepo <dart-internal-monorepo@dart-ci-internal.iam.gserviceaccount.com> | Tue Mar 11 01:18:54 2025 -0700 |
| tree | fd73e4c4338a91052c5f994b66472af20f9a21af | |
| parent | 6ba018607d8259aedb366d68f6686fc0b7c887fe [diff] |
Add `withDurationAndBounce` to `SpringDescription` (#164411) Part of https://github.com/flutter/flutter/issues/152587 ### Description: With `withDurationAndBounce` (we could also rename to `withDuration`), the user only has to worry about a single attribute: the bounce (and duration, but they would have to worry with duration anyway. If they don't, there is a default value already). The standard `SpringDescription` has 3 values, so it is way more abstract. This should help a lot people to make beautiful spring animations using Flutter. <img width="838" alt="image" src="https://github.com/user-attachments/assets/4d0dccc7-0f97-4a13-99a4-268228b87f08" /> ### Negative bounce: I didn't enable bounce to be negative because the behavior is super tricky. I don't know what formula Apple is using, but seems like it is not public. There are many different formulas we can use, including the one provided on the original issue, but then there is the risk of people complaining it works differently than SwiftUI. I need to check if other projects (react-spring, framer motion) support negative bounce, but feels like this is something 99.9999% of people wouldn't expect or use, so I think we are safe. I couldn't find a single usage of negative bounce on Swift in all GitHub (without a duration, using code-search, vs 5k cases with positive values). Not even sure the todo is needed, but won't hurt. ### Comparison <details> <summary>Dart vs Swift testing results</summary> ```dart testWidgets('Spring Simulation Tests - Matching SwiftUI', (WidgetTester tester) async { // Test cases matching the Swift code's ranges List<({Duration duration, double bounce})> testCases = [ (duration: const Duration(milliseconds: 100), bounce: 0.0), (duration: const Duration(milliseconds: 100), bounce: 0.3), (duration: const Duration(milliseconds: 100), bounce: 0.8), (duration: const Duration(milliseconds: 100), bounce: 1.0), (duration: const Duration(milliseconds: 500), bounce: 0.0), (duration: const Duration(milliseconds: 500), bounce: 0.3), (duration: const Duration(milliseconds: 500), bounce: 0.8), (duration: const Duration(milliseconds: 500), bounce: 1.0), (duration: const Duration(milliseconds: 1000), bounce: 0.0), (duration: const Duration(milliseconds: 1000), bounce: 0.3), (duration: const Duration(milliseconds: 1000), bounce: 0.8), (duration: const Duration(milliseconds: 1000), bounce: 1.0), (duration: const Duration(milliseconds: 2000), bounce: 0.0), (duration: const Duration(milliseconds: 2000), bounce: 0.3), (duration: const Duration(milliseconds: 2000), bounce: 0.8), (duration: const Duration(milliseconds: 2000), bounce: 1.0), ]; for (final testCase in testCases) { SpringDescription springDesc = SpringDescription.withDurationAndBounce( duration: testCase.duration, bounce: testCase.bounce, ); print( 'Duration: ${testCase.duration.inMilliseconds / 1000}, Bounce: ${testCase.bounce}, Mass: ${springDesc.mass}, Stiffness: ${springDesc.stiffness}, Damping: ${springDesc.damping}', ); } }); ``` Output: ``` Duration: 0.1, Bounce: 0.0, Mass: 1.0, Stiffness: 3947.8417604357423, Damping: 125.66370614359171 Duration: 0.1, Bounce: 0.3, Mass: 1.0, Stiffness: 3947.8417604357423, Damping: 87.9645943005142 Duration: 0.1, Bounce: 0.8, Mass: 1.0, Stiffness: 3947.8417604357423, Damping: 25.132741228718338 Duration: 0.1, Bounce: 1.0, Mass: 1.0, Stiffness: 3947.8417604357423, Damping: 0.0 Duration: 0.5, Bounce: 0.0, Mass: 1.0, Stiffness: 157.91367041742973, Damping: 25.132741228718345 Duration: 0.5, Bounce: 0.3, Mass: 1.0, Stiffness: 157.91367041742973, Damping: 17.59291886010284 Duration: 0.5, Bounce: 0.8, Mass: 1.0, Stiffness: 157.91367041742973, Damping: 5.026548245743668 Duration: 0.5, Bounce: 1.0, Mass: 1.0, Stiffness: 157.91367041742973, Damping: 0.0 Duration: 1.0, Bounce: 0.0, Mass: 1.0, Stiffness: 39.47841760435743, Damping: 12.566370614359172 Duration: 1.0, Bounce: 0.3, Mass: 1.0, Stiffness: 39.47841760435743, Damping: 8.79645943005142 Duration: 1.0, Bounce: 0.8, Mass: 1.0, Stiffness: 39.47841760435743, Damping: 2.513274122871834 Duration: 1.0, Bounce: 1.0, Mass: 1.0, Stiffness: 39.47841760435743, Damping: 0.0 Duration: 2.0, Bounce: 0.0, Mass: 1.0, Stiffness: 9.869604401089358, Damping: 6.283185307179586 Duration: 2.0, Bounce: 0.3, Mass: 1.0, Stiffness: 9.869604401089358, Damping: 4.39822971502571 Duration: 2.0, Bounce: 0.8, Mass: 1.0, Stiffness: 9.869604401089358, Damping: 1.256637061435917 Duration: 2.0, Bounce: 1.0, Mass: 1.0, Stiffness: 9.869604401089358, Damping: 0.0 ``` Swift: ```swift import SwiftUI import XCTest class SpringParameterTests: XCTestCase { func printSpringParameters(duration: Double, bounce: Double) { let spring = Spring(duration: duration, bounce: bounce) // Let SwiftUI do its thing print("Duration: \(duration), Bounce: \(bounce), Mass: \(spring.mass), Stiffness: \(spring.stiffness), Damping: \(spring.damping)") } func testParameterExtraction() { // Test a range of durations and bounces let durations: [Double] = [0.1, 0.5, 1.0, 2.0] let bounces: [Double] = [0.0, 0.3, 0.8, 1.0] for duration in durations { for bounce in bounces { printSpringParameters(duration: duration, bounce: bounce) } } } } ``` Output: ``` Duration: 0.1, Bounce: 0.0, Mass: 1.0, Stiffness: 3947.8417604357433, Damping: 125.66370614359172 Duration: 0.1, Bounce: 0.3, Mass: 1.0, Stiffness: 3947.841760435743, Damping: 87.96459430051421 Duration: 0.1, Bounce: 0.8, Mass: 1.0, Stiffness: 3947.8417604357423, Damping: 25.132741228718338 Duration: 0.1, Bounce: 1.0, Mass: 1.0, Stiffness: 3947.8417604357433, Damping: 0.0 Duration: 0.5, Bounce: 0.0, Mass: 1.0, Stiffness: 157.91367041742973, Damping: 25.132741228718345 Duration: 0.5, Bounce: 0.3, Mass: 1.0, Stiffness: 157.9136704174297, Damping: 17.59291886010284 Duration: 0.5, Bounce: 0.8, Mass: 1.0, Stiffness: 157.9136704174297, Damping: 5.026548245743668 Duration: 0.5, Bounce: 1.0, Mass: 1.0, Stiffness: 157.91367041742973, Damping: 0.0 Duration: 1.0, Bounce: 0.0, Mass: 1.0, Stiffness: 39.47841760435743, Damping: 12.566370614359172 Duration: 1.0, Bounce: 0.3, Mass: 1.0, Stiffness: 39.478417604357425, Damping: 8.79645943005142 Duration: 1.0, Bounce: 0.8, Mass: 1.0, Stiffness: 39.478417604357425, Damping: 2.513274122871834 Duration: 1.0, Bounce: 1.0, Mass: 1.0, Stiffness: 39.47841760435743, Damping: 0.0 Duration: 2.0, Bounce: 0.0, Mass: 1.0, Stiffness: 9.869604401089358, Damping: 6.283185307179586 Duration: 2.0, Bounce: 0.3, Mass: 1.0, Stiffness: 9.869604401089356, Damping: 4.39822971502571 Duration: 2.0, Bounce: 0.8, Mass: 1.0, Stiffness: 9.869604401089356, Damping: 1.256637061435917 Duration: 2.0, Bounce: 1.0, Mass: 1.0, Stiffness: 9.869604401089358, Damping: 0.0 ``` There are minor differences which should be rounding errors. </details> https://dart.googlesource.com/external/github.com/flutter/flutter/+/b35c6be8c97dbb5f734f6e8c82b56c679bbce239
Monorepo is:
With depot_tools installed and on your path, create a directory for your monorepo checkout and run these commands to create a gclient solution in that directory:
mkdir monorepo cd monorepo gclient config --unmanaged https://dart.googlesource.com/monorepo gclient sync -D
This gives you a checkout in the monorepo directory that contains:
monorepo/ DEPS - the DEPS used for this gclient checkout commits.json - the pinned commits for Dart, flutter/engine, and flutter/flutter tools/ - scripts used to create monorepo DEPS engine/src/ - the flutter/buildroot repo flutter/ - the flutter/engine repo out/ - the build directory, where Flutter engine builds are created third_party/ - Flutter dependencies checked out by DEPS dart/ - the Dart SDK checkout. third_party - Dart dependencies, also used by Flutter flutter/ - the flutter/flutter repo
Flutter's instructions for building the engine are at Compiling the engine
They can be followed closely, with a few changes:
goma_ctl ensure_start is sufficient.Example build commands that work on linux:
MONOREPO_PATH=$PWD if [[ ! $PATH =~ (^|:)$MONOREPO_PATH/flutter/bin(:|$) ]]; then PATH=$MONOREPO_PATH/flutter/bin:$PATH fi export GOMA_DIR=$(dirname $(command -v gclient))/.cipd_bin goma_ctl ensure_start pushd engine/src flutter/tools/gn --goma --no-prebuilt-dart-sdk --unoptimized --full-dart-sdk autoninja -C out/host_debug_unopt popd
The Flutter commands used to build and run apps will use the locally built Flutter engine and Dart SDK, instead of the one downloaded by the Flutter tool, if the --local-engine option is provided.
For example, to build and run the Flutter spinning square sample on the web platform,
MONOREPO_PATH=$PWD cd flutter/examples/layers flutter --local-engine=host_debug_unopt \ -d chrome run widgets/spinning_square.dart cd $MONOREPO_PATH
To build for desktop, specify the desktop platform device in flutter run as -d macos or -d linux or -d windows. You may also need to run the command
flutter create --platforms=windows,macos,linux
on existing apps, such as sample apps. New apps created with flutter create already include these support files. Details of desktop support are at Desktop Support for Flutter
Tests in the Flutter source tree can be run with the flutter test command, run in the directory of a package containing tests. For example:
MONOREPO_PATH=$PWD cd flutter/packages/flutter flutter test --local-engine=host_debug_unopt cd $MONOREPO_PATH
Please file an issue or email the dart-engprod team with any problems with or questions about using monorepo.
We will update this documentation to address them.
flutter commands may download the engine and Dart SDK files for the configured channel, even though they will be using the local engine and its SDK.gclient sync needs to be run in an administrator session, because some installed dependencies create symlinks.