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