Question

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

Answer 1

如何使文本在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;
}

Answer 2

MVVM在数据变更上引发故事争端的方法

我们还可以触发有关数据更改的故事板。我尝试了下面的代码为我工作。在开始之前，请使用以下命名空间。 nuget软件包将在链接Microsoft.Xaml.Behaviors.Uwp.Managed上可用

 xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
 xmlns:Media ="using:Microsoft.Xaml.Interactions.Media"
<Page.Resources>
    <Storyboard x:Name="MoveStoryboard">
        <DoubleAnimation Storyboard.TargetName="txttext1"
                         Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                         From="0" To="-200" Duration="0:0:2">

        </DoubleAnimation>
    </Storyboard>
 </Page.Resources>
<Grid>
  <TextBlock Text="Sample text to Animate">
     <interactivity:Interaction.Behaviors>
         <core:DataTriggerBehavior Binding ={Binding AnimateText} Value = true>
             <Media:ControlStoryboardAction Storyboard="{StaticResource MoveStoryboard}"/>
         </core:DataTriggerBehavior>
       </interactivity:Interaction.Behaviors>
   <TextBlock.RenderTransform>
       <CompositeTransform/>
    </TextBlock.RenderTransform>
   </TextBlock>
</Grid>

我已经更改了ViewModel中的AnimateText属性。无论何时更改属性值。文本块都将基于（-Y值为To =“-200”）从下到上移动。

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

2 个答案: