Layout animations
Layout properties are the ones you cannot animate cheaply: change justify-content
or a width and the browser reflows, it does not tween. FLIP sidesteps that - measure where the
element was (First), let the real layout change happen (Last),
Invert the difference with a transform, then Play it back to
zero. The result animates on the compositor while the DOM is already in its final state.
Layout="true" is the whole opt-in; Bmotion does the measuring.
Animating a reflow
Add Layout="true" to any Bmotion element and every re-render that moves or
resizes it plays a FLIP. Nothing below animates a property directly: the buttons change the
list order and the container's justify-content, and the boxes work out the rest
for themselves.
Shared elements
LayoutId connects elements across mounts. When one unmounts and
another mounts carrying the same id, the new one FLIPs from where the old one was - so a
single underline appears to slide between tabs even though each tab renders its own.
Layout="BmLayout.Position" animates position without scaling, which is what
you want on anything containing text. Wrap independent groups in
<BmotionLayoutGroup Name="…"> to keep their ids from colliding.
Size correction
Animating a box's size by scaling it is fast but wrong: the text inside stretches and the corners go oval. With Layout="true" Bmotion still scales - that is what keeps it on the compositor - but counter-scales the children and corrects the border-radius every frame, so the label and the inner dot stay the size and shape they were. Grow the card and watch what does not distort.
Anchoring and measurement
A FLIP is a comparison between two measurements, and four parameters decide what is being
compared. LayoutAnchor picks the point that appears to stay still: the
default top-left corner is right for text and rows, while
BmLayoutAnchor.Center makes a box grow outward evenly - the same size change,
read completely differently.
The other three are about the coordinate space. LayoutScroll is for an
element inside a scrolling container: without it, scrolling that container between the two
measurements looks exactly like the element having moved, and it jumps.
LayoutRoot does the same job for a position: fixed element,
which stays put while the page scrolls under it. LayoutDependency is the
performance one - measuring forces a reflow, so pointing it at the state the layout actually
depends on stops unrelated re-renders paying for one.