Animate TextBlock, когда значение изменяется

Question

Я хочу иметь анимацию, подобное этому (табло, когда 2 становится 4): gif example

Используя эту статью: https://michaelscherf.wordpress.com/2009/02/23/how-to-trigger-an-animation-when-textblocks-text-is-changed-during-a-databinding/, я был в состоянии модифицировать непрозрачность моего текстового блока при изменении текста.

Но я вообще не вижу, как я могу сделать тот же эффект перевода?

Мой текстовый блок также будет содержать только цифры.

Answer 1

Вы можете сделать что-то вроде этого, имея в виду концепцию просто дать иллюзию тикера. Удалите триггер Framework.Loaded, когда вы подключили привязку данных. Красный/Зеленый текст служит для иллюстрации иллюзий, которые вы собираетесь использовать. Вследствие того, что «Зеленый» сохранит первоначальное значение за один раз, а «Красный» станет новым значением. Также не забудьте добавить ссылку NotifyTargetUpdated привязки из ссылки вашего примера на вашу базу привязки. Конечно, вам, вероятно, нужно будет настроить некоторые значения, чтобы получить то, что вам нужно.

Также не забудьте удалить RepeatBehavior="Forever" с раскадровки, так как это также просто для этого первоначального примера.

<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" ClipToBounds="True"> 
     <Grid.Resources> 
      <Storyboard x:Key="flipItGood" Duration="0:0:2" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
              Storyboard.TargetName="A"> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
              Storyboard.TargetName="B"> 
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="20"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </Grid.Resources> 
     <Grid.Triggers> 
      <!-- THIS IS HERE ONLY FOR AN IMMEDIATE EXAMPLE 
       DITCH THIS TRIGGER FOR THE TARGET.UPDATED ONE WHEN ACTUALLY USING --> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
       <BeginStoryboard Storyboard="{StaticResource flipItGood}"/> 
      </EventTrigger> 
     </Grid.Triggers> 

     <TextBlock x:Name="A" 
        Text="BIND ME" 
        Foreground="Red" FontSize="18" FontWeight="Bold" 
        RenderTransformOrigin="0.5,0.5"> 

      <TextBlock.RenderTransform> 
       <TransformGroup> 
        <ScaleTransform/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform Y="-20"/> 
       </TransformGroup> 
      </TextBlock.RenderTransform> 

      <TextBlock.Triggers> 

       <EventTrigger RoutedEvent="Binding.TargetUpdated"> 
        <BeginStoryboard Storyboard="{StaticResource flipItGood}"/> 
       </EventTrigger> 

      </TextBlock.Triggers> 
     </TextBlock> 
     <TextBlock x:Name="B" 
          Text="BIND ME" FontSize="18" FontWeight="Bold" 
          Foreground="Green" RenderTransformOrigin="0.5,0.5"> 
      <TextBlock.RenderTransform> 
       <TransformGroup> 
        <ScaleTransform/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform/> 
       </TransformGroup> 
      </TextBlock.RenderTransform> 
     </TextBlock> 

    </Grid> 

Какой результат (извините за дерьмовый gif);

Надеется, что это помогает, ура.