如何为StackPanel创建动画

Question

与其他网站一样，当您将鼠标悬停在某个项目上时，信息会弹出或向上移动（从单个文本到多个文本等）。我想将其存档在UWP中

<Grid>
   <Image source="1.png"/>
   <StackPanel>
       <TextBlock Text="1"/>
       <TextBlock Text="2"/>
       <TextBlock Text="3"/>
   </StackPanel>
</Grid>

如何创建一个动画，堆栈默认隐藏在“网格”下，当鼠标悬停时，“StackPanel”从文本1移动到3？

Answer 1

您可以使用DoubleAnimation为Opacity的TextBlock设置0~1的动画。

我做了一个简单的代码示例供您参考：

<Page.Resources>
    <Storyboard x:Name="StoryboardSample1">
        <DoubleAnimation Duration="0:0:2" To="1"
            Storyboard.TargetProperty="Opacity"
            Storyboard.TargetName="txb1" Completed="DoubleAnimation_Completed"/>
    </Storyboard>

    <Storyboard x:Name="StoryboardSample2">
        <DoubleAnimation Duration="0:0:2" To="1"
            Storyboard.TargetProperty="Opacity"
            Storyboard.TargetName="txb2" Completed="DoubleAnimation_Completed_2"/>
    </Storyboard>

    <Storyboard x:Name="StoryboardSample3">
        <DoubleAnimation Duration="0:0:2" To="1"
            Storyboard.TargetProperty="Opacity"
            Storyboard.TargetName="txb3" />
    </Storyboard>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Image Source="/Assets/dog.jpg"/>
        <StackPanel PointerEntered="StackPanel_PointerEntered">
            <TextBlock x:Name="txb1" Text="1" FontSize="30" Opacity="0"/>
            <TextBlock x:Name="txb2" Text="2" FontSize="30" Opacity="0"/>
            <TextBlock x:Name="txb3" Text="3" FontSize="30" Opacity="0"/>
        </StackPanel>
    </Grid>
</Grid>

private void StackPanel_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    StoryboardSample1.Begin();
}

private void DoubleAnimation_Completed(object sender, object e)
{
    StoryboardSample2.Begin();
}

private void DoubleAnimation_Completed_2(object sender, object e)
{
    StoryboardSample3.Begin();
}

请阅读Animations in XAML了解更多详情。