Как сделать анимацию перемещения текста снизу вверх в UWP

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;
}

MVVM aproach to trigger story bord on datachange

Мы также можем запустить раскадровку при изменении данных. Я попробовал приведенный ниже код, он работает для меня. Используйте пространство имен ниже, прежде чем начать. Пакет 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>

Я изменил свойство AnimateText в ViewModel. Всякий раз, когда значение свойства изменяется. Текстовый блок будет перемещаться снизу вверх на основе (- значение Y, равное To = "-200").