Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
669e13eb
Commit
669e13eb
authored
Jul 19, 2017
by
Yegor
Committed by
GitHub
Jul 19, 2017
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
AnimatedSize: state machine, tests, animate only when needed (#11305)
parent
02b65bc9
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
354 additions
and
183 deletions
+354
-183
animated_size.dart
packages/flutter/lib/src/rendering/animated_size.dart
+128
-28
animated_size_test.dart
packages/flutter/test/widgets/animated_size_test.dart
+226
-155
No files found.
packages/flutter/lib/src/rendering/animated_size.dart
View file @
669e13eb
...
...
@@ -10,6 +10,41 @@ import 'box.dart';
import
'object.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
/// [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
...
...
@@ -60,10 +95,16 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
AnimationController
_controller
;
CurvedAnimation
_animation
;
final
SizeTween
_sizeTween
=
new
SizeTween
();
bool
_didChangeTargetSizeLastFrame
=
false
;
bool
_hasVisualOverflow
;
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.
Duration
get
duration
=>
_controller
.
duration
;
set
duration
(
Duration
value
)
{
...
...
@@ -82,6 +123,12 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
_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.
TickerProvider
get
vsync
=>
_vsync
;
TickerProvider
_vsync
;
...
...
@@ -93,16 +140,10 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
_controller
.
resync
(
vsync
);
}
@override
void
attach
(
PipelineOwner
owner
)
{
super
.
attach
(
owner
);
if
(
_animatedSize
!=
_sizeTween
.
end
&&
!
_controller
.
isAnimating
)
_controller
.
forward
();
}
@override
void
detach
()
{
_controller
.
stop
();
_state
=
RenderAnimatedSizeState
.
start
;
super
.
detach
();
}
...
...
@@ -121,34 +162,93 @@ class RenderAnimatedSize extends RenderAligningShiftedBox {
}
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
;
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
();
if
(
size
.
width
<
_sizeTween
.
end
.
width
||
size
.
height
<
_sizeTween
.
end
.
height
)
_hasVisualOverflow
=
true
;
}
void
_restartAnimation
()
{
_lastValue
=
0.0
;
_controller
.
forward
(
from:
0.0
);
}
size
=
constraints
.
constrain
(
_animatedSize
);
/// 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
;
}
}
else
{
_didChangeTargetSizeLastFrame
=
false
;
size
=
constraints
.
constrain
(
_animatedSize
);
/// 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
;
}
}
alignChild
();
/// 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
;
}
}
if
(
size
.
width
<
_sizeTween
.
end
.
width
||
size
.
height
<
_sizeTween
.
end
.
height
)
_hasVisualOverflow
=
true
;
/// 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
...
...
packages/flutter/test/widgets/animated_size_test.dart
View file @
669e13eb
...
...
@@ -16,7 +16,8 @@ class TestPaintingContext implements PaintingContext {
}
void
main
(
)
{
testWidgets
(
'AnimatedSize test'
,
(
WidgetTester
tester
)
async
{
group
(
'AnimatedSize'
,
()
{
testWidgets
(
'animates forwards then backwards with stable-sized children'
,
(
WidgetTester
tester
)
async
{
await
tester
.
pumpWidget
(
new
Center
(
child:
new
AnimatedSize
(
...
...
@@ -89,7 +90,7 @@ void main() {
expect
(
box
.
size
.
height
,
equals
(
100.0
));
});
testWidgets
(
'AnimatedSize constrained test
'
,
(
WidgetTester
tester
)
async
{
testWidgets
(
'clamps animated size to constraints
'
,
(
WidgetTester
tester
)
async
{
await
tester
.
pumpWidget
(
new
Center
(
child:
new
SizedBox
(
...
...
@@ -111,6 +112,7 @@ void main() {
expect
(
box
.
size
.
width
,
equals
(
100.0
));
expect
(
box
.
size
.
height
,
equals
(
100.0
));
// Attempt to animate beyond the outer SizedBox.
await
tester
.
pumpWidget
(
new
Center
(
child:
new
SizedBox
(
...
...
@@ -128,13 +130,30 @@ void main() {
),
);
// 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 with AnimatedContainer'
,
(
WidgetTester
tester
)
async
{
testWidgets
(
'tracks unstable child, then resumes animation when child stabilizes'
,
(
WidgetTester
tester
)
async
{
Future
<
Null
>
pumpMillis
(
int
millis
)
async
{
await
tester
.
pump
(
new
Duration
(
milliseconds:
millis
));
}
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
(
...
...
@@ -149,10 +168,9 @@ void main() {
),
);
RenderBox
box
=
tester
.
renderObject
(
find
.
byType
(
AnimatedSize
));
expect
(
box
.
size
.
width
,
equals
(
100.0
));
expect
(
box
.
size
.
height
,
equals
(
100.0
));
verify
(
size:
100.0
,
state:
RenderAnimatedSizeState
.
stable
);
// Animate child size from 100 to 200 slowly (100ms).
await
tester
.
pumpWidget
(
new
Center
(
child:
new
AnimatedSize
(
...
...
@@ -167,17 +185,45 @@ void main() {
),
);
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
));
// Make sure animation proceeds at child's pace, with AnimatedSize
// tightly tracking the child's size.
verify
(
state:
RenderAnimatedSizeState
.
stable
);
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
);
// Stabilize size
await
pumpMillis
(
50
);
verify
(
size:
200.0
,
state:
RenderAnimatedSizeState
.
stable
);
// Quickly (in 1ms) change size back to 100
await
tester
.
pumpWidget
(
new
Center
(
child:
new
AnimatedSize
(
duration:
const
Duration
(
milliseconds:
200
),
vsync:
tester
,
child:
new
AnimatedContainer
(
duration:
const
Duration
(
milliseconds:
1
),
width:
100.0
,
height:
100.0
,
),
),
),
);
verify
(
size:
200.0
,
state:
RenderAnimatedSizeState
.
stable
);
await
pumpMillis
(
1
);
// register change
verify
(
state:
RenderAnimatedSizeState
.
changed
);
await
pumpMillis
(
100
);
verify
(
size:
150.0
,
state:
RenderAnimatedSizeState
.
stable
);
await
pumpMillis
(
100
);
verify
(
size:
100.0
,
state:
RenderAnimatedSizeState
.
stable
);
});
testWidgets
(
'AnimatedSize resync
'
,
(
WidgetTester
tester
)
async
{
testWidgets
(
'resyncs its animation controller
'
,
(
WidgetTester
tester
)
async
{
await
tester
.
pumpWidget
(
const
Center
(
child:
const
AnimatedSize
(
...
...
@@ -209,4 +255,29 @@ void main() {
final
RenderBox
box
=
tester
.
renderObject
(
find
.
byType
(
AnimatedSize
));
expect
(
box
.
size
.
width
,
equals
(
150.0
));
});
testWidgets
(
'does not run animation unnecessarily'
,
(
WidgetTester
tester
)
async
{
await
tester
.
pumpWidget
(
new
Center
(
child:
new
AnimatedSize
(
duration:
const
Duration
(
milliseconds:
200
),
vsync:
tester
,
child:
const
SizedBox
(
width:
100.0
,
height:
100.0
,
),
),
),
);
for
(
int
i
=
0
;
i
<
20
;
i
++)
{
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
));
}
});
});
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment