Avalonia/Wpf 实现文字跑马灯效果

效果展示

 

WPF：

  <Border
      Width="100"
      Height="30"
      BorderBrush="Black"
      BorderThickness="1">
      <Canvas ClipToBounds="True">
          <TextBlock Text="Hello World" VerticalAlignment="Center">
              <TextBlock.RenderTransform>
                  <TranslateTransform Y="0" />
              </TextBlock.RenderTransform>
              <TextBlock.Triggers>
                  <EventTrigger RoutedEvent="Loaded">
                      <BeginStoryboard>
                          <Storyboard>
                              <DoubleAnimation
                                  RepeatBehavior="Forever"
                                  Storyboard.TargetProperty="RenderTransform.X"
                                  From="150"
                                  To="-250"
                                  Duration="0:0:5" />
                          </Storyboard>
                      </BeginStoryboard>
                  </EventTrigger>
              </TextBlock.Triggers>
          </TextBlock>
      </Canvas>
  </Border>

Avalnia：

  <Border
      Width="100"
      Height="30"
      BorderBrush="Black"
      BorderThickness="1">
      <Canvas ClipToBounds="True">
          <TextBlock HorizontalAlignment="Center" Text="Hello World">
              <TextBlock.Styles>
                  <Style Selector="TextBlock">
                      <Style.Animations>
                                <!--IterationCount="INFINITE" 要无限次地重复动画，请使用特殊值 INFINITE-->
                          <Animation IterationCount="INFINITE" Duration="0:0:13">
                              <KeyFrame Cue="0%">
                                  <Setter Property="TranslateTransform.X" Value="200" />
                              </KeyFrame>
                              <KeyFrame Cue="100%">
                                  <Setter Property="TranslateTransform.X" Value="-100" />
                              </KeyFrame>
                          </Animation>
                      </Style.Animations>
                  </Style>
              </TextBlock.Styles>
          </TextBlock>
      </Canvas>
  </Border>