如何在UWP中让文字从下往上移动动画

Question

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

Answer 1

How to make text moving Animation from bottom to top in 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 aproach to trigger story bord on datachange

我们还可以触发有关数据更改的故事板。我尝试了下面的代码，它对我有用。在开始之前使用下面的命名空间。 nuget 包将在 link 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中让文字从下往上移动动画

How to make text moving Animation from bottom to top in UWP

c#

uwp

uwp-xaml