WPF 字幕文本动画

Question

我可以使用

TranslateTransform

滚动文本，但是当动画接近完成时，我希望它再次开始。像蛇一样:)

这就是我所拥有的：

<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
    <StackPanel.RenderTransform>
        <TranslateTransform x:Name="transferCurreny" X="-40"/>
    </StackPanel.RenderTransform>
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="0" To="-900" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
    <TextBlock FontSize="25"  x:Name="txtKron" Margin="10,0,7,0"/>
</StackPanel>

这就是我想要的：

Answer 1

这样的事情应该可以解决问题。

您可以将

Canvas

添加到

StackPanel

，其中 2 个

TextBlocks

一个设置为位置 0，一个设置为

ActualWidth

的

StackPanel

，然后当第一个文本块超出屏幕时，另一个块将进入视野。

我使用

Canvas

的原因是因为

Canvas

是唯一真正支持

ClipToBounds="false"

的元素，这使得第二个

TextBlock

可见，即使它放置在

Canvas

本身的边界之外

如果您想从右向左滚动，我们还需要一个

IValueConverter

来获取正确的负值。

我还在

SizeChanged

上添加了事件触发器，因此如果调整窗口大小，动画值将正确更新。

代码：

namespace WpfApplication9
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class NegatingConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is double)
            {
                return -((double)value);
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is double)
            {
                return +(double)value;
            }
            return value;
        }
    }
}

Xaml：

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication9"
        Title="MainWindow" Height="83" Width="222" Name="UI" Tag="Tol Level">
    <StackPanel Orientation="Horizontal" x:Name="stack">
        <StackPanel.Resources>
            <local:NegatingConverter x:Key="NegatingConverter" />
            <Storyboard x:Key="slide">
                <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
            </Storyboard>
        </StackPanel.Resources>
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="transferCurreny" X="0"/>
        </StackPanel.RenderTransform>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="StackPanel.SizeChanged">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
        </StackPanel.Triggers>
        <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
            <TextBlock Text="StackOverflow" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
            <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas}"/>
        </Canvas>
    </StackPanel>
</Window>

结果：

编辑：从左到右

 <StackPanel Orientation="Horizontal" x:Name="stack">
        <StackPanel.Resources>
            <local:NegatingConverter x:Key="NegatingConverter" />
            <Storyboard x:Key="slide">
                <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas}" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
            </Storyboard>
        </StackPanel.Resources>
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="transferCurreny" X="0"/>
        </StackPanel.RenderTransform>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="StackPanel.SizeChanged">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
        </StackPanel.Triggers>
        <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
            <TextBlock Text="StackOverflow" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
            <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}"/>
        </Canvas>
    </StackPanel>

Answer 2

上面答案中的代码不会产生连续滚动。这是连续平滑滚动的代码。

XAML：

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Canvas Margin="6,83,9,0" Name="ViewingBox" Background="YellowGreen" Height="35" VerticalAlignment="Top">
            <Label Canvas.Left="263" Canvas.Top="-2" Height="49" Name="BoxOne" FontSize="20">I need breakfast.</Label>
            <Label Canvas.Left="263" Canvas.Top="-2" Height="49" HorizontalAlignment="Stretch" Name="BoxTwo" VerticalAlignment="Top" FontSize="20">You can have oranges and egg.</Label>
        </Canvas>   
    </Grid>
</Window>

VB 代码背后：

Imports System.Windows.Media.Animation

Public Enum Texts
    BoxOne
    BoxTwo
End Enum

Class Window1
    Private dubAnim As New DoubleAnimation()
    Private dubAnim2 As New DoubleAnimation()
    Private NewsTimer As New Windows.Threading.DispatcherTimer()
    Dim leadText As Texts = Texts.BoxOne

    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        dubAnim.From = ViewingBox.ActualWidth
        dubAnim.To = -BoxOne.ActualWidth
        dubAnim.SpeedRatio = 0.05
        AddHandler dubAnim.Completed, AddressOf dubAnim_Completed
        Timeline.SetDesiredFrameRate(dubAnim, 320)
        BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim)

        dubAnim2.From = ViewingBox.ActualWidth
        dubAnim2.To = -BoxTwo.ActualWidth
        dubAnim2.SpeedRatio = 0.05
        Timeline.SetDesiredFrameRate(dubAnim2, 320)
        AddHandler dubAnim2.Completed, AddressOf dubAnim2_Completed

        AddHandler NewsTimer.Tick, AddressOf NewsTimer_Tick
        NewsTimer.Interval = New TimeSpan(0, 0, 0.9)
        NewsTimer.Start()
    End Sub

    Private Sub NewsTimer_Tick(ByVal sender As Object, ByVal e As EventArgs)
        Dim BoxOneLocation As Point = BoxOne.TranslatePoint(New Point(0, 0), ViewingBox)
        Dim BoxTwoLocation As Point = BoxTwo.TranslatePoint(New Point(0, 0), ViewingBox)

        If leadText = Texts.BoxOne Then
            Dim loc As Double = BoxOneLocation.X + BoxOne.ActualWidth
            If loc < ViewingBox.ActualWidth / 1.5 Then
                BoxTwo.BeginAnimation(Canvas.LeftProperty, dubAnim2)
                NewsTimer.Stop()
            End If
        Else
            Dim loc As Double = BoxTwoLocation.X + BoxTwo.ActualWidth
            If loc < ViewingBox.ActualWidth / 1.5 Then
                BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim)
                NewsTimer.Stop()
            End If
        End If
    End Sub

    Private Sub dubAnim_Completed(ByVal sender As Object, ByVal e As EventArgs)
        leadText = Texts.BoxTwo
        NewsTimer.Start()
    End Sub

    Private Sub dubAnim2_Completed(ByVal sender As Object, ByVal e As EventArgs)
        leadText = Texts.BoxOne
        NewsTimer.Start()
    End Sub
End Class

Answer 3

扩展sa_ddam213的答案，这是对第一个动画（从右到左）的修改。这适用于长字符串。 :)

<StackPanel Orientation="Horizontal"
                    x:Name="stack" 
                    Grid.Column="0"
                    Margin="0"                        >

            <StackPanel.Resources>
                <local1:NegatingConverter x:Key="NegatingConverter" />
                <Storyboard x:Key="slide">
                    <DoubleAnimation From="{Binding ActualWidth, ElementName=stack}" 
                                     To="{Binding ActualWidth, ElementName=txtKron, Converter={StaticResource NegatingConverter}}" 
                                     Duration="00:00:30"
                                     Storyboard.TargetProperty="X"
                                     Storyboard.TargetName="transferCurreny2"
                                     RepeatBehavior="Forever"/>
                </Storyboard>
            </StackPanel.Resources>

            <Label Content="{Binding Path=RSSFeed}" 
                       x:Name="txtKron" 
                       Canvas.Left="0"
                       Foreground="#E9D460"
                       Padding="0"
                       Margin="0"
                       VerticalAlignment="Center">

                <Label.Triggers>
                    <EventTrigger RoutedEvent="Label.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource slide}"/>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Label.SizeChanged">
                        <BeginStoryboard Storyboard="{StaticResource slide}"/>
                    </EventTrigger>
                </Label.Triggers>

                <Label.RenderTransform>
                    <TranslateTransform x:Name="transferCurreny2" X="0"/>
                </Label.RenderTransform>
            </Label>

        </StackPanel>

Answer 4

为了使此功能适用于比元素长的字符串，并隐藏溢出元素的文本，我进一步修改了之前的答案。

要直接使用它，首先创建一个名为 WpfApp1 的项目

xaml：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Border Width="200" HorizontalAlignment="Center" VerticalAlignment="Center" Height="25" ClipToBounds="True" BorderThickness="1.5" BorderBrush="Red">
            <Border x:Name="stack">
                <Border.Resources>
                    <local:NegatingConverter x:Key="NegatingConverter" />
                    <local:MarqueeMargin x:Key="MarqueeMargin" />
                    <local:NegMarqueeMargin x:Key="NegMarqueeMargin" />

                    <Storyboard x:Key="slide">
                        <DoubleAnimation From="0" To="{Binding ActualWidth, ElementName=txt_scroll, Converter={StaticResource NegMarqueeMargin}}" Duration="00:00:2"
                          Storyboard.TargetProperty="X"
                          Storyboard.TargetName="transferCurreny"
                          RepeatBehavior="Forever"/>
                    </Storyboard>
                </Border.Resources>
                <Border.RenderTransform>
                    <TranslateTransform x:Name="transferCurreny" X="0"/>
                </Border.RenderTransform>
                <Border.Triggers>
                    <EventTrigger RoutedEvent="StackPanel.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource slide}" />
                    </EventTrigger>
                    <EventTrigger RoutedEvent="StackPanel.SizeChanged">
                        <BeginStoryboard Storyboard="{StaticResource slide}" />
                    </EventTrigger>
                </Border.Triggers>
                <Canvas Width="{Binding ActualWidth, ElementName=stack}">
                    <TextBlock Text="This text is too long to fit in the parent element." FontSize="15" Foreground="#F00" x:Name="txt_scroll" Canvas.Left="0"/>
                    <TextBlock Text="{Binding Text, ElementName=txt_scroll}" FontSize="15" Foreground="#F00" Canvas.Left="{Binding ActualWidth, ElementName=txt_scroll, Converter={StaticResource MarqueeMargin}}"/>
                </Canvas>
            </Border>
        </Border>

    </Grid>
</Window>

此窗口的 C# 代码：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Border Width="200" HorizontalAlignment="Center" VerticalAlignment="Center" Height="25" ClipToBounds="True" BorderThickness="1.5" BorderBrush="Red">
            <Border x:Name="moving_border">
                <Border.Resources>
                    <local:NegatingConverter x:Key="NegatingConverter" />
                    <local:MarqueeMargin x:Key="MarqueeMargin" />
                    <local:NegMarqueeMargin x:Key="NegMarqueeMargin" />

                    <Storyboard x:Key="slide">
                        <DoubleAnimation From="0" To="{Binding ActualWidth, ElementName=txt_scroll, Converter={StaticResource NegMarqueeMargin}}" Duration="00:00:2"
                          Storyboard.TargetProperty="X"
                          Storyboard.TargetName="transferCurreny"
                          RepeatBehavior="Forever"/>
                    </Storyboard>
                </Border.Resources>
                <Border.RenderTransform>
                    <TranslateTransform x:Name="transferCurreny" X="0"/>
                </Border.RenderTransform>
                <Border.Triggers>
                    <EventTrigger RoutedEvent="Border.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource slide}" />
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Border.SizeChanged">
                        <BeginStoryboard Storyboard="{StaticResource slide}" />
                    </EventTrigger>
                </Border.Triggers>
                <Canvas Width="{Binding ActualWidth, ElementName=moving_border}">
                    <TextBlock Text="This text is too long to fit in the parent element." FontSize="15" Foreground="#F00" x:Name="txt_scroll" Canvas.Left="0"/>
                    <TextBlock Text="{Binding Text, ElementName=txt_scroll}" FontSize="15" Foreground="#F00" Canvas.Left="{Binding ActualWidth, ElementName=txt_scroll, Converter={StaticResource MarqueeMargin}}"/>
                </Canvas>
            </Border>
        </Border>

    </Grid>
</Window>

Answer 5

这是 Leon Munir 的答案的 C# 版本。

MainWindow.xaml

<Window x:Class="TextAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TextAnimation"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Canvas Margin="6,83,9,0" Name="ViewingBox" Background="YellowGreen" Height="35" VerticalAlignment="Top">
            <Label Canvas.Left="263" Canvas.Top="-2" Height="49" Name="BoxOne" FontSize="20">I need breakfast.</Label>
            <Label Canvas.Left="263" Canvas.Top="-2" Height="49" HorizontalAlignment="Stretch" Name="BoxTwo" VerticalAlignment="Top" FontSize="20">You can have oranges and egg.</Label>
        </Canvas>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace TextAnimation
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private DoubleAnimation dubAnim = new DoubleAnimation();
        private DoubleAnimation dubAnim2 = new DoubleAnimation();
        private System.Windows.Threading.DispatcherTimer NewsTimer = new System.Windows.Threading.DispatcherTimer();
        private Texts leadText = Texts.BoxOne;

        public MainWindow()
        {
            InitializeComponent();
            Loaded += Window1_Loaded;
        }



        private void Window1_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            dubAnim.From = ViewingBox.ActualWidth;
            dubAnim.To = -BoxOne.ActualWidth;
            dubAnim.SpeedRatio = 0.05d;
            dubAnim.Completed += DubAnim_Completed;
            Timeline.SetDesiredFrameRate(dubAnim, 320);
            BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim);

            dubAnim2.From = ViewingBox.ActualWidth;
            dubAnim2.To = -BoxTwo.ActualWidth;
            dubAnim2.SpeedRatio = 0.05d;
            Timeline.SetDesiredFrameRate(dubAnim2, 320);
            dubAnim2.Completed += DubAnim2_Completed;

            NewsTimer.Tick += NewsTimer_Tick;
            NewsTimer.Interval = new TimeSpan(0, 0, (int)Math.Round(0.9));
            NewsTimer.Start();
        }

        private void NewsTimer_Tick(object sender, EventArgs e)
        {
            Point BoxOneLocation = BoxOne.TranslatePoint(new Point(0, 0), ViewingBox);
            Point BoxTwoLocation = BoxTwo.TranslatePoint(new Point(0, 0), ViewingBox);

            if (leadText == Texts.BoxOne)
            {
                double loc = BoxOneLocation.X + BoxOne.ActualWidth;
                if (loc < ViewingBox.ActualWidth / 1.5d)
                {
                    BoxTwo.BeginAnimation(Canvas.LeftProperty, dubAnim2);
                    NewsTimer.Stop();
                }
            }
            else
            {
                double loc = BoxTwoLocation.X + BoxTwo.ActualWidth;
                if (loc < ViewingBox.ActualWidth / 1.5d)
                {
                    BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim);
                    NewsTimer.Stop();
                }
            }
        }

        private void DubAnim_Completed(object sender, EventArgs e)
        {
            leadText = Texts.BoxTwo;
            NewsTimer.Start();
        }

        private void DubAnim2_Completed(object sender, EventArgs e)
        {
            leadText = Texts.BoxOne;
            NewsTimer.Start();
        }
    }
}

文本.cs

namespace TextAnimation
{
    public enum Texts
    {
        BoxOne,
        BoxTwo
    }
}

Answer 6

我从下面的链接中找到了一个更简单的选框文本（仅适用于我的情况，所以请先尝试一下），对于更多类似向上和向下的内容，您可以检查链接

https://www.codeproject.com/Articles/48267/Making-a-Simple-Marquee-Text-Control-Drip-Animatio

详情可以查看以下图片：

xaml：

<Canvas ClipToBounds="True"
                 Name="canMain"
                 VerticalAlignment="Center"
                 Background="YellowGreen"
                 Height="35">
            <TextBlock  Name="tbmarquee"
                        Text="Testing 123~ Testing 123~ Testing 123~"
                            FontSize="24"
                            FontWeight="Bold"
                            Foreground="Black"></TextBlock>
        </Canvas>

C#代码 从左到右

private void LeftToRightMarquee()
{
    double height = canMain.ActualHeight - tbmarquee.ActualHeight;
    tbmarquee.Margin = new Thickness(0, height / 2, 0, 0);
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    doubleAnimation.From = -tbmarquee.ActualWidth;
    doubleAnimation.To = canMain.ActualWidth;
    doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    doubleAnimation.Duration = new 
    Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));
    tbmarquee.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
}

从右到左

private void RightToLeftMarquee()
{
    double height = canMain.ActualHeight - tbmarquee.ActualHeight;
    tbmarquee.Margin = new Thickness(0, height / 2, 0, 0);
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    doubleAnimation.From = -tbmarquee.ActualWidth;
    doubleAnimation.To = canMain.ActualWidth;
    doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    doubleAnimation.Duration = new 
    Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));
    tbmarquee.BeginAnimation(Canvas.RightProperty, doubleAnimation);
}