wpf 显示 歌词进度

使用2色的线性背景画刷,设置动画调整颜色的中心点

XAML

<Window
    x:Class="WpfDemoApp.LyricCtrls.LyricWindow"
    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"
    Title="LyricWindow"
    Width="1000" Height="350"
    Background="Black"
    mc:Ignorable="d">

    <Grid>

        <!--  生成光辉  -->
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

            <Grid Width="{Binding ElementName=LyricTextBlock, Path=ActualWidth}" Height="120">

                <TextBlock
                    x:Name="LyricTextBlockCopy"
                    Width="120"
                    HorizontalAlignment="Left" VerticalAlignment="Center"
                    FontFamily="{Binding ElementName=LyricTextBlock, Path=FontFamily}"
                    FontSize="{Binding ElementName=LyricTextBlock, Path=FontSize}"
                    Foreground="AliceBlue"
                    Text="{Binding ElementName=LyricTextBlock, Path=Text}">
                    <TextBlock.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard TargetName="LyricTextBlockCopy">
                                    <DoubleAnimation
                                        AutoReverse="True" RepeatBehavior="Forever"
                                        Storyboard.TargetProperty="Width" From="0"
                                        To="{Binding ElementName=LyricTextBlock, Path=ActualWidth}"
                                        Duration="0:0:25" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </TextBlock.Triggers>

                    <TextBlock.Effect>
                        <DropShadowEffect
                            BlurRadius="10" Opacity="1" ShadowDepth="3"
                            Color="#FFAA00" />
                    </TextBlock.Effect>
                </TextBlock>
            </Grid>
        </Grid>

        <!--  歌词显示进度  -->
        <Grid Height="120">

            <TextBlock
                x:Name="LyricTextBlock"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                FontSize="36" Text="在你孤单的时候有人陪伴你,在你失落的时候有人帮助你。">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard TargetName="ForegroundTransform">
                                <!--  3. 动画修改渐变色的相对位置  -->
                                <DoubleAnimation
                                    AutoReverse="True" RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="X" From="-0.5" To="0.5" Duration="0:0:25" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </TextBlock.Triggers>
                <TextBlock.Foreground>
                    <LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
                        <!--  2 设置一个相对位置的渐变  -->
                        <LinearGradientBrush.RelativeTransform>
                            <TranslateTransform x:Name="ForegroundTransform" X="-0.1" />
                        </LinearGradientBrush.RelativeTransform>
                        <!--  1. 设置背景色为渐变色, 但是右边为白色,左侧显示进度色  -->
                        <GradientStop Offset="0.49999" Color="#ff1ecd97" />
                        <GradientStop Offset=".5" Color="White" />
                    </LinearGradientBrush>
                </TextBlock.Foreground>
            </TextBlock>

        </Grid>

    </Grid>
</Window>
上一篇
下一篇