时间戳

首页 > 解决方案 > 如何在UWP中使文本从下到上移动动画

c# - 如何在UWP中使文本从下到上移动动画

问题描述

如何在 UWP 中从下到上为文本设置动画。有没有更好的方法来触发 UWP 中的样式属性。

标签： c#uwpuwp-xaml

解决方案

如何在UWP中使文本从下到上移动动画

您可以使用DoubleAnimation来接近，请参考以下代码。

<Grid>
    <Grid.Resources>
        <Storyboard x:Name="MoveStoryboard">
            <DoubleAnimation Storyboard.TargetName="Tbk"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                             From="0" Windows10version1903:To="{x:Bind TbkY, Mode=TwoWay}" Duration="0:0:2">

            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
    <TextBlock Loaded="Tbk_Loaded" 
               Name="Tbk" 
               Text="hello Nico"
               VerticalAlignment="Bottom" 
               Visibility="Visible" 
               HorizontalAlignment="Center" 
               FontSize="22" 
               TextLineBounds="Full"  >
        <TextBlock.RenderTransform>
            <CompositeTransform/>
        </TextBlock.RenderTransform>
    </TextBlock>
    <Button Content="Move" Click="Button_Click"/>
</Grid>

代码背后 

private void Button_Click(object sender, RoutedEventArgs e)
{
    MoveStoryboard.Begin();        
}
public double TbkY { get; set; }

private void Tbk_Loaded(object sender, RoutedEventArgs e)
{
    TbkY = -Tbk.ActualOffset.Y;
}

推荐阅读