Skip to content

F
Front-End
Commit 669e13eb authored by Yegor's avatar Yegor Committed by GitHub
Browse files
Options

AnimatedSize: state machine, tests, animate only when needed (#11305)

parent 02b65bc9
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 183 deletions
packages/flutter/lib/src/rendering/animated_size.dart
View file @ 669e13eb
...@@ -10,6 +10,41 @@ import 'box.dart'; ...@@ -10,6 +10,41 @@ import 'box.dart';
import 'object.dart'; import 'object.dart';
import 'shifted_box.dart'; import 'shifted_box.dart';
/// A [RenderAnimatedSize] can be in exactly one of these states.
@visibleForTesting
enum RenderAnimatedSizeState {
/// The initial state, when we do not yet know what the starting and target
/// sizes are to animate.
///
/// Next possible state is [stable].
start,
/// At this state the child's size is assumed to be stable and we are either
/// animating, or waiting for the child's size to change.
///
/// Next possible state is [changed].
stable,
/// At this state we know that the child has changed once after being assumed
/// [stable].
///
/// Next possible states are:
///
/// - [stable] - if the child's size stabilized immediately, this is a signal
/// for us to begin animating the size towards the child's new size.
/// - [unstable] - if the child's size continues to change, we assume it is
/// not stable and enter the [unstable] state.
changed,
/// At this state the child's size is assumed to be unstable.
///
/// Instead of chasing the child's size in this state we tightly track the
/// child's size until it stabilizes.
///
/// Next possible state is [stable].
unstable,
}
/// A render object that animates its size to its child's size over a given /// A render object that animates its size to its child's size over a given
/// [duration] and with a given [curve]. If the child's size itself animates /// [duration] and with a given [curve]. If the child's size itself animates
/// (i.e. if it changes size two frames in a row, as opposed to abruptly /// (i.e. if it changes size two frames in a row, as opposed to abruptly
...@@ -60,10 +95,16 @@ class RenderAnimatedSize extends RenderAligningShiftedBox { ...@@ -60,10 +95,16 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
AnimationController _controller; AnimationController _controller;
CurvedAnimation _animation; CurvedAnimation _animation;
final SizeTween _sizeTween = new SizeTween(); final SizeTween _sizeTween = new SizeTween();
bool _didChangeTargetSizeLastFrame = false;
bool _hasVisualOverflow; bool _hasVisualOverflow;
double _lastValue; double _lastValue;
/// The state this size animation is in.
///
/// See [RenderAnimatedSizeState] for possible states.
@visibleForTesting
RenderAnimatedSizeState get state => _state;
RenderAnimatedSizeState _state = RenderAnimatedSizeState.start;
/// The duration of the animation. /// The duration of the animation.
Duration get duration => _controller.duration; Duration get duration => _controller.duration;
set duration(Duration value) { set duration(Duration value) {
...@@ -82,6 +123,12 @@ class RenderAnimatedSize extends RenderAligningShiftedBox { ...@@ -82,6 +123,12 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
_animation.curve = value; _animation.curve = value;
} }
/// Whether the size is being currently animated towards the child's size.
///
/// See [RenderAnimatedSizeState] for situations when we may not be animating
/// the size.
bool get isAnimating => _controller.isAnimating;
/// The [TickerProvider] for the [AnimationController] that runs the animation. /// The [TickerProvider] for the [AnimationController] that runs the animation.
TickerProvider get vsync => _vsync; TickerProvider get vsync => _vsync;
TickerProvider _vsync; TickerProvider _vsync;
...@@ -93,16 +140,10 @@ class RenderAnimatedSize extends RenderAligningShiftedBox { ...@@ -93,16 +140,10 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
_controller.resync(vsync); _controller.resync(vsync);
} }
@override
void attach(PipelineOwner owner) {
super.attach(owner);
if (_animatedSize != _sizeTween.end && !_controller.isAnimating)
_controller.forward();
}
@override @override
void detach() { void detach() {
_controller.stop(); _controller.stop();
_state = RenderAnimatedSizeState.start;
super.detach(); super.detach();
} }
...@@ -121,29 +162,25 @@ class RenderAnimatedSize extends RenderAligningShiftedBox { ...@@ -121,29 +162,25 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
} }
child.layout(constraints, parentUsesSize: true); child.layout(constraints, parentUsesSize: true);
if (_sizeTween.end != child.size) {
_sizeTween.begin = _animatedSize ?? child.size;
_sizeTween.end = child.size;
if (_didChangeTargetSizeLastFrame) {
size = child.size;
_controller.stop();
} else {
// Don't register first change as a last-frame change.
if (_sizeTween.end != _sizeTween.begin)
_didChangeTargetSizeLastFrame = true;
_lastValue = 0.0;
_controller.forward(from: 0.0);
size = constraints.constrain(_animatedSize);
}
} else {
_didChangeTargetSizeLastFrame = false;
size = constraints.constrain(_animatedSize); switch(_state) {
case RenderAnimatedSizeState.start:
_layoutStart();
break;
case RenderAnimatedSizeState.stable:
_layoutStable();
break;
case RenderAnimatedSizeState.changed:
_layoutChanged();
break;
case RenderAnimatedSizeState.unstable:
_layoutUnstable();
break;
default:
throw new StateError('$runtimeType is in an invalid state $_state');
} }
size = constraints.constrain(_animatedSize);
alignChild(); alignChild();
if (size.width < _sizeTween.end.width || if (size.width < _sizeTween.end.width ||
...@@ -151,6 +188,69 @@ class RenderAnimatedSize extends RenderAligningShiftedBox { ...@@ -151,6 +188,69 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
_hasVisualOverflow = true; _hasVisualOverflow = true;
} }
void _restartAnimation() {
_lastValue = 0.0;
_controller.forward(from: 0.0);
}
/// Laying out the child for the first time.
///
/// We have the initial size to animate from, but we do not have the target
/// size to animate to, so we set both ends to child's size.
void _layoutStart() {
_sizeTween.begin = _sizeTween.end = child.size;
_state = RenderAnimatedSizeState.stable;
}
/// At this state we're assuming the child size is stable and letting the
/// animation run its course.
///
/// If during animation the size of the child changes we restart the
/// animation.
void _layoutStable() {
if (_sizeTween.end != child.size) {
_sizeTween.end = child.size;
_restartAnimation();
_state = RenderAnimatedSizeState.changed;
} else if (_controller.value == _controller.upperBound) {
// Animation finished. Reset target sizes.
_sizeTween.begin = _sizeTween.end = child.size;
}
}
/// This state indicates that the size of the child changed once after being
/// considered stable.
///
/// If the child stabilizes immediately, we go back to stable state. If it
/// changes again, we match the child's size, restart animation and go to
/// unstable state.
void _layoutChanged() {
if (_sizeTween.end != child.size) {
// Child size changed again. Match the child's size and restart animation.
_sizeTween.begin = _sizeTween.end = child.size;
_restartAnimation();
_state = RenderAnimatedSizeState.unstable;
} else {
// Child size stabilized.
_state = RenderAnimatedSizeState.stable;
}
}
/// The child's size is not stable.
///
/// Continue tracking the child's size until is stabilizes.
void _layoutUnstable() {
if (_sizeTween.end != child.size) {
// Still unstable. Continue tracking the child.
_sizeTween.begin = _sizeTween.end = child.size;
_restartAnimation();
} else {
// Child size stabilized.
_controller.stop();
_state = RenderAnimatedSizeState.stable;
}
}
@override @override
void paint(PaintingContext context, Offset offset) { void paint(PaintingContext context, Offset offset) {
if (child != null && _hasVisualOverflow) { if (child != null && _hasVisualOverflow) {
......
packages/flutter/test/widgets/animated_size_test.dart
View file @ 669e13eb
...@@ -16,197 +16,268 @@ class TestPaintingContext implements PaintingContext { ...@@ -16,197 +16,268 @@ class TestPaintingContext implements PaintingContext {
} }
void main() { void main() {
testWidgets('AnimatedSize test', (WidgetTester tester) async { group('AnimatedSize', () {
await tester.pumpWidget( testWidgets('animates forwards then backwards with stable-sized children', (WidgetTester tester) async {
new Center( await tester.pumpWidget(
child: new AnimatedSize( new Center(
duration: const Duration(milliseconds: 200), child: new AnimatedSize(
vsync: tester, duration: const Duration(milliseconds: 200),
child: const SizedBox( vsync: tester,
width: 100.0, child: const SizedBox(
height: 100.0, width: 100.0,
height: 100.0,
),
), ),
), ),
), );
);
RenderBox box = tester.renderObject(find.byType(AnimatedSize));
RenderBox box = tester.renderObject(find.byType(AnimatedSize)); expect(box.size.width, equals(100.0));
expect(box.size.width, equals(100.0)); expect(box.size.height, equals(100.0));
expect(box.size.height, equals(100.0));
await tester.pumpWidget(
await tester.pumpWidget( new Center(
new Center( child: new AnimatedSize(
child: new AnimatedSize( duration: const Duration(milliseconds: 200),
duration: const Duration(milliseconds: 200), vsync: tester,
vsync: tester, child: const SizedBox(
child: const SizedBox( width: 200.0,
width: 200.0, height: 200.0,
height: 200.0, ),
), ),
), ),
), );
);
await tester.pump(const Duration(milliseconds: 100));
await tester.pump(const Duration(milliseconds: 100)); box = tester.renderObject(find.byType(AnimatedSize));
box = tester.renderObject(find.byType(AnimatedSize)); expect(box.size.width, equals(150.0));
expect(box.size.width, equals(150.0)); expect(box.size.height, equals(150.0));
expect(box.size.height, equals(150.0));
TestPaintingContext context = new TestPaintingContext();
TestPaintingContext context = new TestPaintingContext(); box.paint(context, Offset.zero);
box.paint(context, Offset.zero); expect(context.invocations.first.memberName, equals(#pushClipRect));
expect(context.invocations.first.memberName, equals(#pushClipRect));
await tester.pump(const Duration(milliseconds: 100));
await tester.pump(const Duration(milliseconds: 100)); box = tester.renderObject(find.byType(AnimatedSize));
box = tester.renderObject(find.byType(AnimatedSize)); expect(box.size.width, equals(200.0));
expect(box.size.width, equals(200.0)); expect(box.size.height, equals(200.0));
expect(box.size.height, equals(200.0));
await tester.pumpWidget(
await tester.pumpWidget( new Center(
new Center( child: new AnimatedSize(
child: new AnimatedSize( duration: const Duration(milliseconds: 200),
duration: const Duration(milliseconds: 200), vsync: tester,
vsync: tester, child: const SizedBox(
child: const SizedBox( width: 100.0,
height: 100.0,
),
),
),
);
await tester.pump(const Duration(milliseconds: 100));
box = tester.renderObject(find.byType(AnimatedSize));
expect(box.size.width, equals(150.0));
expect(box.size.height, equals(150.0));
context = new TestPaintingContext();
box.paint(context, Offset.zero);
expect(context.invocations.first.memberName, equals(#paintChild));
await tester.pump(const Duration(milliseconds: 100));
box = tester.renderObject(find.byType(AnimatedSize));
expect(box.size.width, equals(100.0));
expect(box.size.height, equals(100.0));
});
testWidgets('clamps animated size to constraints', (WidgetTester tester) async {
await tester.pumpWidget(
new Center(
child: new SizedBox (
width: 100.0, width: 100.0,
height: 100.0, height: 100.0,
child: new AnimatedSize(
duration: const Duration(milliseconds: 200),
vsync: tester,
child: const SizedBox(
width: 100.0,
height: 100.0,
),
),
), ),
), ),
), );
);
RenderBox box = tester.renderObject(find.byType(AnimatedSize));
await tester.pump(const Duration(milliseconds: 100)); expect(box.size.width, equals(100.0));
box = tester.renderObject(find.byType(AnimatedSize)); expect(box.size.height, equals(100.0));
expect(box.size.width, equals(150.0));
expect(box.size.height, equals(150.0)); // Attempt to animate beyond the outer SizedBox.
await tester.pumpWidget(
context = new TestPaintingContext(); new Center(
box.paint(context, Offset.zero); child: new SizedBox (
expect(context.invocations.first.memberName, equals(#paintChild)); width: 100.0,
height: 100.0,
await tester.pump(const Duration(milliseconds: 100)); child: new AnimatedSize(
box = tester.renderObject(find.byType(AnimatedSize)); duration: const Duration(milliseconds: 200),
expect(box.size.width, equals(100.0)); vsync: tester,
expect(box.size.height, equals(100.0)); child: const SizedBox(
}); width: 200.0,
height: 200.0,
),
),
),
),
);
// Verify that animated size is the same as the outer SizedBox.
await tester.pump(const Duration(milliseconds: 100));
box = tester.renderObject(find.byType(AnimatedSize));
expect(box.size.width, equals(100.0));
expect(box.size.height, equals(100.0));
});
testWidgets('AnimatedSize constrained test', (WidgetTester tester) async { testWidgets('tracks unstable child, then resumes animation when child stabilizes', (WidgetTester tester) async {
await tester.pumpWidget( Future<Null> pumpMillis(int millis) async {
new Center( await tester.pump(new Duration(milliseconds: millis));
child: new SizedBox ( }
width: 100.0,
height: 100.0, void verify({double size, RenderAnimatedSizeState state}) {
assert(size != null || state != null);
final RenderAnimatedSize box = tester.renderObject(find.byType(AnimatedSize));
if (size != null) {
expect(box.size.width, size);
expect(box.size.height, size);
}
if (state != null) {
expect(box.state, state);
}
}
await tester.pumpWidget(
new Center(
child: new AnimatedSize( child: new AnimatedSize(
duration: const Duration(milliseconds: 200), duration: const Duration(milliseconds: 200),
vsync: tester, vsync: tester,
child: const SizedBox( child: new AnimatedContainer(
duration: const Duration(milliseconds: 100),
width: 100.0, width: 100.0,
height: 100.0, height: 100.0,
), ),
), ),
), ),
), );
);
verify(size: 100.0, state: RenderAnimatedSizeState.stable);
RenderBox box = tester.renderObject(find.byType(AnimatedSize));
expect(box.size.width, equals(100.0)); // Animate child size from 100 to 200 slowly (100ms).
expect(box.size.height, equals(100.0)); await tester.pumpWidget(
new Center(
await tester.pumpWidget(
new Center(
child: new SizedBox (
width: 100.0,
height: 100.0,
child: new AnimatedSize( child: new AnimatedSize(
duration: const Duration(milliseconds: 200), duration: const Duration(milliseconds: 200),
vsync: tester, vsync: tester,
child: const SizedBox( child: new AnimatedContainer(
duration: const Duration(milliseconds: 100),
width: 200.0, width: 200.0,
height: 200.0, height: 200.0,
), ),
), ),
), ),
), );
);
await tester.pump(const Duration(milliseconds: 100)); // Make sure animation proceeds at child's pace, with AnimatedSize
box = tester.renderObject(find.byType(AnimatedSize)); // tightly tracking the child's size.
expect(box.size.width, equals(100.0)); verify(state: RenderAnimatedSizeState.stable);
expect(box.size.height, equals(100.0)); await pumpMillis(1); // register change
}); verify(state: RenderAnimatedSizeState.changed);
await pumpMillis(49);
verify(size: 150.0, state: RenderAnimatedSizeState.unstable);
await pumpMillis(50);
verify(size: 200.0, state: RenderAnimatedSizeState.unstable);
testWidgets('AnimatedSize with AnimatedContainer', (WidgetTester tester) async { // Stabilize size
await tester.pumpWidget( await pumpMillis(50);
new Center( verify(size: 200.0, state: RenderAnimatedSizeState.stable);
child: new AnimatedSize(
duration: const Duration(milliseconds: 200), // Quickly (in 1ms) change size back to 100
vsync: tester, await tester.pumpWidget(
child: new AnimatedContainer( new Center(
duration: const Duration(milliseconds: 100), child: new AnimatedSize(
width: 100.0, duration: const Duration(milliseconds: 200),
height: 100.0, vsync: tester,
child: new AnimatedContainer(
duration: const Duration(milliseconds: 1),
width: 100.0,
height: 100.0,
),
), ),
), ),
), );
);
verify(size: 200.0, state: RenderAnimatedSizeState.stable);
RenderBox box = tester.renderObject(find.byType(AnimatedSize)); await pumpMillis(1); // register change
expect(box.size.width, equals(100.0)); verify(state: RenderAnimatedSizeState.changed);
expect(box.size.height, equals(100.0)); await pumpMillis(100);
verify(size: 150.0, state: RenderAnimatedSizeState.stable);
await tester.pumpWidget( await pumpMillis(100);
new Center( verify(size: 100.0, state: RenderAnimatedSizeState.stable);
child: new AnimatedSize( });
duration: const Duration(milliseconds: 200),
vsync: tester, testWidgets('resyncs its animation controller', (WidgetTester tester) async {
child: new AnimatedContainer( await tester.pumpWidget(
duration: const Duration(milliseconds: 100), const Center(
width: 200.0, child: const AnimatedSize(
height: 200.0, duration: const Duration(milliseconds: 200),
vsync: const TestVSync(),
child: const SizedBox(
width: 100.0,
height: 100.0,
),
), ),
), ),
), );
);
await tester.pump(const Duration(milliseconds: 1)); // register change
await tester.pump(const Duration(milliseconds: 49));
expect(box.size.width, equals(150.0));
expect(box.size.height, equals(150.0));
await tester.pump(const Duration(milliseconds: 50));
box = tester.renderObject(find.byType(AnimatedSize));
expect(box.size.width, equals(200.0));
expect(box.size.height, equals(200.0));
});
testWidgets('AnimatedSize resync', (WidgetTester tester) async { await tester.pumpWidget(
await tester.pumpWidget( new Center(
const Center( child: new AnimatedSize(
child: const AnimatedSize( duration: const Duration(milliseconds: 200),
duration: const Duration(milliseconds: 200), vsync: tester,
vsync: const TestVSync(), child: const SizedBox(
child: const SizedBox( width: 200.0,
width: 100.0, height: 100.0,
height: 100.0, ),
), ),
), ),
), );
);
await tester.pump(const Duration(milliseconds: 100));
await tester.pumpWidget(
new Center( final RenderBox box = tester.renderObject(find.byType(AnimatedSize));
child: new AnimatedSize( expect(box.size.width, equals(150.0));
duration: const Duration(milliseconds: 200), });
vsync: tester,
child: const SizedBox( testWidgets('does not run animation unnecessarily', (WidgetTester tester) async {
width: 200.0, await tester.pumpWidget(
height: 100.0, new Center(
child: new AnimatedSize(
duration: const Duration(milliseconds: 200),
vsync: tester,
child: const SizedBox(
width: 100.0,
height: 100.0,
),
), ),
), ),
), );
);
await tester.pump(const Duration(milliseconds: 100));
final RenderBox box = tester.renderObject(find.byType(AnimatedSize)); for (int i = 0; i < 20; i++) {
expect(box.size.width, equals(150.0)); final RenderAnimatedSize box = tester.renderObject(find.byType(AnimatedSize));
expect(box.size.width, 100.0);
expect(box.size.height, 100.0);
expect(box.state, RenderAnimatedSizeState.stable);
expect(box.isAnimating, false);
await tester.pump(const Duration(milliseconds: 10));
}
});
}); });
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab