LayoutAnimation

LayoutAnimation和MultiLayoutPanel

有某种动画值得特别注意。当元素具有某些属性,如WidthHeightMargin(统称为“布局属性”)改变或当它在视图树中的位置改变时,布局动画。

计算大型UX文档的布局可能相当昂贵。当使用更改动画制作动画布局属性时,我们运行强制每个框架计算新布局的风险。这很容易导致帧丢失。

保险丝提供了一个整洁的替代品:LayoutAnimation触发器。
例如,我们可以使用Set并使用LayoutAnimation对这个变化作出反应,而不是使用变化来动画化一个元素宽度。在`LayoutAnimation’中,我们指定元素如何从上一个位置移动/调整大小到新位置。
这里有一个简单的例子:

<面板>
    <Panel ux:Name =“panel”Width =“50”Height =“50”Background =“Teal”>
        <LayoutAnimation>
            <Resize X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“0.5”/>
            <Move X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“0.5”/>
        </ LayoutAnimation>
        <Clicked>
            <Set panel.Width =“200”/>
            <Set panel.Height =“300”/>
        </ Clicked>
    </ Panel>
</ Panel>

已单击触发器中有两个设置操作。他们设置面板宽度高度
Panel有一个LayoutAnimation,它有一个调整大小移动动画。这两个动画都有自己的“RelativeTo”属性设置为“LayoutChange”。这意味着它们将从计算新布局之前的任何值生成到任何新值。因为改变面板宽度高度导致它的位置改变,我们还使用移动动画制作一个平滑的动画。

动画其他布局属性

LayoutAnimation打开了一个全世界的可能性。我们可以例如使用它来动画化一个elements对齐:

<面板>
    <Panel ux:Name =“panel”Width =“50”Height =“50”Background =“Teal”Alignment =“Center”>
        <LayoutAnimation>
            <Move X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“0.5”/>
        </ LayoutAnimation>
        <Clicked>
            <Set panel.Alignment =“BottomRight”/>
        </ Clicked>
    </ Panel>
</ Panel>

在本示例中,我们使用设置操作将面板对齐中心更改为BottomRight。我们使用布局动画移动,以使它移动到新的位置。

MultiLayoutPanel

MultiLayout允许我们在不同的布局之间移动元素。这允许我们在视觉树中的不同位置之间移动元素,还可以在特定布局之间切换。

占位符

Placeholder元素用于引用视觉树中的其他元素。“占位符”本身是一个Element,它可以有自己的布局属性。

当我们想为同一个Element定义两个不同的位置或布局时,使用“占位符”。我们使用占位符Target属性来引用我们想要作为plceholder的Element元素定义本身也必须包装在一个Placeholder中。把它当作一个元素从一个“Placeholder”转移到另一个。

<Placeholder Height =“50”>
    <Rectangle ux:Name =“rectangle1”Fill =“Red”/>
</ Placeholder>

<Placeholder Target =“rectangle1”Height =“100”/>

请注意,第二个“占位符”引用Rectangle,而不是其他的“占位符”。

要在两个占位符之间切换,我们需要使用MultiLayout。我们可以将MultiLayout应用于任何Panel类型或使用MultiLayoutPanel。下面是我们如何将上面的例子应用到StackPanel:

<StackPanel>
    <MultiLayout LayoutElement =“placeholder2”/>
    <Placeholder Name =“placeholder1”Height =“70”>
        <Rectangle Name =“rectangle1”Fill =“Red”Margin =“25,5”/>
    </ Placeholder>
    <Placeholder Name =“placeholder2”Target =“rectangle1”Height =“100”/>
</ StackPanel>

通过更改MultiLayout的LayoutElement属性,我们可以在“placeholder1”和“placeholder2”之间移动Rectangle。请注意,Rectangle具有其Margin属性设置。因此,当它移动到另一个Placeholder时,该属性仍然存在。然而,高度是在占位符本身设置的,因此会改变。

这里有一个快速示例,显示了如何将Rectangle从一个Panel移动到另一个。在这个例子中,我们使用一个MultilayoutPanel和一个DockLayout。我们把三个panel放在里面,docket到不同的位置。我们使用占位符来引用一个Rectangle,并在三个panel之间移动。

<MultiLayoutPanel ux:Name =“multiLayoutPanel”>
    <DockLayout />
    <Panel ux:Name =“panel1”>
        <Placeholder Width =“50”Height =“50”>
            <Rectangle ux:Name =“rect”Fill =“Teal”>
                <LayoutAnimation>
                    <Move X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“1”/>
                    <Resize X =“1”Y =“1”RelativeTo =“LayoutChange”Duration =“1”/>
                </ LayoutAnimation>
            </ Rectangle>
            <Clicked>
                <Set multiLayoutPanel.LayoutElement =“panel2”/>
            </ Clicked>
        </ Placeholder>
    </ Panel>
    <Panel ux:Name =“panel2”Dock =“Right”Width =“200”>
        <Placeholder Target =“rect”>
            <Clicked>
                <Set multiLayoutPanel.LayoutElement =“panel3”/>
            </ Clicked>
        </ Placeholder>
    </ Panel>
    <Panel ux:Name =“panel3”Dock =“Bottom”Height =“100”>
        <Placeholder Target =“rect”>
            <Clicked>
                <Set multiLayoutPanel.LayoutElement =“panel1”/>
            </ Clicked>
        </ Placeholder>
    </ Panel>
</ MultiLayoutPanel>

查看这些例子以了解使用LayoutAnimationMultiLayout的灵感。