UWP字幕文本动画

时间:2019-05-10 07:04:03

标签: uwp uwp-xaml

是否有uwp版本的字幕文本动画。

我想要和WPF Marquee Text Animation一样的效果。

当指针进入网格项目时,字幕文本开始动画。 当指针退出网格项目时,选取框文字停止动画。

enter image description here

1 个答案:

答案 0 :(得分:0)

这是我根据here提供的答案编写的UWP版本。这只是一个演示,您需要自己定制才能满足您的要求。

请先创建一个用户控件,这是该用户控件中的XAML代码:

     <Grid PointerEntered="Grid_PointerEntered" Width="265" PointerExited="Grid_PointerExited" x:Name="mygrid">
        <Grid.Resources>
            <local:NegatingConverter x:Key="NegatingConverter"/>
            <Storyboard x:Name="Storyboard1">
                <DoubleAnimation
                            Storyboard.TargetName="transferCurreny"
                            Storyboard.TargetProperty="X"
                            Duration="0:0:6" From="0"
                            To="{Binding Width,ElementName=canvas,Converter={StaticResource NegatingConverter}}"
                            RepeatBehavior="Forever"/>
            </Storyboard>
        </Grid.Resources>
        <StackPanel x:Name="mystack" Height="500" Background="AliceBlue">
            <StackPanel Orientation="Horizontal" x:Name="stack" Height="100">
                    <StackPanel.RenderTransform>
                        <TranslateTransform x:Name="transferCurreny" X="0"/>
                    </StackPanel.RenderTransform>
                <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
                    <TextBlock Text="TestTesting" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
                    <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas}"/>
                </Canvas>
            </StackPanel>
        </StackPanel>

    </Grid>

这是背后的代码:

     private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            Storyboard1.Begin();
        }

        private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            Storyboard1.Stop();
        }

还有转换器:

     public class NegatingConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (value is double)
            {
                return -((double)value);
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            if (value is double)
            {
                return +(double)value;
            }
            return value;
        }
    }

有一个潜在的问题。如果不设置上述mystack stackpanel的背景,就会遇到冲突问题。