Skip to content

Commit b35c6be

Browse files
authored
Add withDurationAndBounce to SpringDescription (#164411)
Part of flutter/flutter#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>
1 parent d452d04 commit b35c6be

File tree

2 files changed

+140
-0
lines changed

2 files changed

+140
-0
lines changed

packages/flutter/lib/src/physics/spring_simulation.dart

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,44 @@ class SpringDescription {
4343
double ratio = 1.0,
4444
}) : damping = ratio * 2.0 * math.sqrt(mass * stiffness);
4545

46+
/// Creates a [SpringDescription] based on a desired animation duration and
47+
/// bounce.
48+
///
49+
/// This provides an intuitive way to define a spring based on its visual
50+
/// properties, [duration] and [bounce]. Check the properties' documentation
51+
/// for their definition.
52+
///
53+
/// This constructor produces the same result as SwiftUI's
54+
/// `spring(duration:bounce:blendDuration:)` animation.
55+
///
56+
/// {@tool snippet}
57+
/// ```dart
58+
/// final SpringDescription spring = SpringDescription.withDurationAndBounce(
59+
/// duration: const Duration(milliseconds: 300),
60+
/// bounce: 0.3,
61+
/// );
62+
/// ```
63+
/// {@end-tool}
64+
///
65+
/// See also:
66+
/// * [SpringDescription], which creates a spring by explicitly providing
67+
/// physical parameters.
68+
/// * [SpringDescription.withDampingRatio], which creates a spring with a
69+
/// damping ratio and other physical parameters.
70+
factory SpringDescription.withDurationAndBounce({
71+
Duration duration = const Duration(milliseconds: 500),
72+
double bounce = 0.0,
73+
}) {
74+
assert(duration.inMilliseconds > 0, 'Duration must be positive');
75+
final double durationInSeconds = duration.inMilliseconds / Duration.millisecondsPerSecond;
76+
const double mass = 1.0;
77+
final double stiffness = (4 * math.pi * math.pi * mass) / math.pow(durationInSeconds, 2);
78+
final double dampingRatio = bounce > 0 ? (1.0 - bounce) : (1 / (bounce + 1));
79+
final double damping = dampingRatio * 2.0 * math.sqrt(mass * stiffness);
80+
81+
return SpringDescription(mass: mass, stiffness: stiffness, damping: damping);
82+
}
83+
4684
/// The mass of the spring (m).
4785
///
4886
/// The units are arbitrary, but all springs within a system should use
@@ -78,6 +116,43 @@ class SpringDescription {
78116
/// driving the [SpringSimulation].
79117
final double damping;
80118

119+
/// The duration parameter used in [SpringDescription.withDurationAndBounce].
120+
///
121+
/// This value defines the perceptual duration of the spring, controlling
122+
/// its overall pace. It is approximately equal to the time it takes for
123+
/// the spring to settle, but for highly bouncy springs, it instead
124+
/// corresponds to the oscillation period.
125+
///
126+
/// This duration does not represent the exact time for the spring to stop
127+
/// moving. For example, when [bounce] is 1, the spring oscillates
128+
/// indefinitely, even though [duration] has a finite value. To determine
129+
/// when the motion has effectively stopped within a certain tolerance,
130+
/// use [SpringSimulation.isDone].
131+
///
132+
/// Defaults to 0.5 seconds.
133+
Duration get duration {
134+
final double durationInSeconds = math.sqrt((4 * math.pi * math.pi * mass) / stiffness);
135+
final int milliseconds = (durationInSeconds * Duration.millisecondsPerSecond).round();
136+
return Duration(milliseconds: milliseconds);
137+
}
138+
139+
/// The bounce parameter used in [SpringDescription.withDurationAndBounce].
140+
///
141+
/// This value controls how bouncy the spring is:
142+
///
143+
/// * A value of 0 results in a critically damped spring with no oscillation.
144+
/// * Values between 0 and 1 produce underdamping, where the spring oscillates a few times
145+
/// before settling. A value of 1 represents an undamped spring that
146+
/// oscillates indefinitely.
147+
/// * Negative values indicate overdamping, where the motion is slow and
148+
/// resistive, like moving through a thick fluid.
149+
///
150+
/// Defaults to 0.
151+
double get bounce {
152+
final double dampingRatio = damping / (2.0 * math.sqrt(mass * stiffness));
153+
return dampingRatio < 1.0 ? (1.0 - dampingRatio) : ((1 / dampingRatio) - 1);
154+
}
155+
81156
@override
82157
String toString() =>
83158
'${objectRuntimeType(this, 'SpringDescription')}(mass: ${mass.toStringAsFixed(1)}, stiffness: ${stiffness.toStringAsFixed(1)}, damping: ${damping.toStringAsFixed(1)})';

packages/flutter/test/physics/spring_simulation_test.dart

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,69 @@ void main() {
3535
expect(snappingSimulation.x(time), 1);
3636
expect(snappingSimulation.dx(time), 0);
3737
});
38+
39+
group('SpringDescription.withDurationAndBounce', () {
40+
test('creates spring with expected results', () {
41+
final SpringDescription spring = SpringDescription.withDurationAndBounce(bounce: 0.3);
42+
43+
expect(spring.mass, equals(1.0));
44+
expect(spring.stiffness, moreOrLessEquals(157.91, epsilon: 0.01));
45+
expect(spring.damping, moreOrLessEquals(17.59, epsilon: 0.01));
46+
47+
// Verify that getters recalculate correctly
48+
expect(spring.bounce, moreOrLessEquals(0.3, epsilon: 0.0001));
49+
expect(spring.duration.inMilliseconds, equals(500));
50+
});
51+
52+
test('creates spring with negative bounce', () {
53+
final SpringDescription spring = SpringDescription.withDurationAndBounce(bounce: -0.3);
54+
55+
expect(spring.mass, equals(1.0));
56+
expect(spring.stiffness, moreOrLessEquals(157.91, epsilon: 0.01));
57+
expect(spring.damping, moreOrLessEquals(35.90, epsilon: 0.01));
58+
59+
// Verify that getters recalculate correctly
60+
expect(spring.bounce, moreOrLessEquals(-0.3, epsilon: 0.0001));
61+
expect(spring.duration.inMilliseconds, equals(500));
62+
});
63+
64+
test('get duration and bounce based on mass and stiffness', () {
65+
const SpringDescription spring = SpringDescription(
66+
mass: 1.0,
67+
stiffness: 157.91,
68+
damping: 17.59,
69+
);
70+
71+
expect(spring.bounce, moreOrLessEquals(0.3, epsilon: 0.001));
72+
expect(spring.duration.inMilliseconds, equals(500));
73+
});
74+
75+
test('custom duration', () {
76+
final SpringDescription spring = SpringDescription.withDurationAndBounce(
77+
duration: const Duration(milliseconds: 100),
78+
);
79+
80+
expect(spring.mass, equals(1.0));
81+
expect(spring.stiffness, moreOrLessEquals(3947.84, epsilon: 0.01));
82+
expect(spring.damping, moreOrLessEquals(125.66, epsilon: 0.01));
83+
84+
expect(spring.bounce, moreOrLessEquals(0, epsilon: 0.001));
85+
expect(spring.duration.inMilliseconds, equals(100));
86+
});
87+
88+
test('duration <= 0 should fail', () {
89+
expect(
90+
() => SpringDescription.withDurationAndBounce(
91+
duration: const Duration(seconds: -1),
92+
bounce: 0.3,
93+
),
94+
throwsA(isAssertionError),
95+
);
96+
97+
expect(
98+
() => SpringDescription.withDurationAndBounce(duration: Duration.zero, bounce: 0.3),
99+
throwsA(isAssertionError),
100+
);
101+
});
102+
});
38103
}

0 commit comments

Comments
 (0)