Как сделать так, чтобы текст перемещался Анимация снизу вверх в UWP

Question

Как анимировать текст снизу вверх в UWP.Есть ли лучший способ вызвать свойства стиля в UWP.

Answer 1

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>

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

Answer 2

Как сделать так, чтобы текст перемещался Анимация снизу вверх в 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;
}