WPF选框文本动画

我可以用TranslateTransform滚动文本，但是当动画接近完成时，我希望它重新开始。像蛇:)WPF选框文本动画

这是我的本钱：

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

这是想什么我：

enter image description here

来源

2013-03-10 meymetkaplan

有什么问题吗？什么是期望的行为，你得到的行为是什么？ – 2013-03-10 14:38:53

问题是;我想选框文字，但像蛇一样 – meymetkaplan 2013-03-10 14:44:09

我还是不明白。你能画一幅画吗？或者把我们指向一个你以前见过这种效果的地方？ – 2013-03-10 14:47:06

像这样的东西应该做的伎俩。

可以将Canvas添加到一个设置为0和一组定位到StackPanel的ActualWidth，那么当文本的第一个块进入屏幕外其他块将进入视野。

我用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>

结果：

enter image description here

编辑：左到右

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

来源

2013-03-10 23:04:25

嗨这真的很棒。我正在研究它buttom顶:)但我有这个问题; 当第一个块到顶部（实际上是一个图像）它将顶部= 0，但图像几乎顶部= 50，我没有解决这个问题。谢谢！ – meymetkaplan 2013-03-19 18:32:24

这里有个问题 - 动画无法启动。我通过添加一个Loaded事件并在它后面的代码中修复了它：Storyboard sb =（Storyboard）this.stack.FindResource（“slide”）; （）=> stack.Dispatcher.BeginInvoke（DispatcherPriority.Loaded，new Action（（）=> { sb.Begin（）; }））; – 2013-06-03 11:49:23

我们也可以使用这个相同的代码来成像。谢谢sa_ddam – Sagotharan 2013-11-19 05:32:18

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

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

来源

2013-06-13 12:31:00

不错。效果很好！ – 2013-09-09 20:32:36

WPF选框文本动画

回答

相关问题