WPF开发者QQ群: 340500857
前言
需要实现类似音乐播放器字幕滚动动画。
欢迎转发、分享、点赞,谢谢大家~。
效果预览(更多效果请下载源码体验):
一、TextBlockCustomControl.cs代码如下:
public class TextBlockCustomControl : TextBlock { public static readonly DependencyProperty DurationProperty = DependencyProperty.Register("Duration", typeof(TimeSpan), typeof(TextBlockCustomControl), new PropertyMetadata(TimeSpan.FromSeconds(1))); public TimeSpan Duration { get { return (TimeSpan)GetValue(DurationProperty); } set { SetValue(DurationProperty, value); } } public TimeSpan StartDuration { get { return (TimeSpan)GetValue(StartDurationProperty); } set { SetValue(StartDurationProperty, value); } } public static readonly DependencyProperty StartDurationProperty = DependencyProperty.Register("StartDuration", typeof(TimeSpan), typeof(TextBlockCustomControl), new PropertyMetadata(TimeSpan.FromSeconds(1))); public TextBlockCustomControl() { NameScope.SetNameScope(this, new NameScope()); var gradientBrush = new LinearGradientBrush(); gradientBrush.EndPoint = new Point(1, 0.5); gradientBrush.StartPoint = new Point(0, 0.5); var stop1 = new GradientStop(Colors.White, 0); var stop2 = new GradientStop(Colors.White, 1); var stop3 = new GradientStop(Colors.Gray, 1); this.RegisterName("GradientStop1", stop1); this.RegisterName("GradientStop2", stop2); this.RegisterName("GradientStop3", stop3); gradientBrush.GradientStops.Add(stop1); gradientBrush.GradientStops.Add(stop2); gradientBrush.GradientStops.Add(stop3); this.Foreground = gradientBrush; this.Loaded += (s, e) => { Animate(); }; } public override void OnApplyTemplate() { base.OnApplyTemplate(); } private void Animate() { var storyboard = new Storyboard(); var animation1 = new DoubleAnimation(); animation1.From = 0; animation1.To = 1; animation1.Duration = Duration; animation1.BeginTime = StartDuration; Storyboard.SetTargetName(animation1, "GradientStop2"); Storyboard.SetTargetProperty(animation1, new PropertyPath(GradientStop.OffsetProperty)); var animation2 = new DoubleAnimation(); animation2.From = 0; animation2.To = 1; animation2.Duration = Duration; animation2.BeginTime = StartDuration; Storyboard.SetTargetName(animation2, "GradientStop3"); Storyboard.SetTargetProperty(animation2, new PropertyPath(GradientStop.OffsetProperty)); storyboard.Children.Add(animation1); storyboard.Children.Add(animation2); storyboard.Begin(this); } }
二、MainWindow.xaml代码如下:
<Window x:Class="WPFSongWords.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:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell" xmlns:local="clr-namespace:WPFSongWords" mc:Ignorable="d" Title="WPFDevelopers" Height="650" Width="400" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" TextOptions.TextFormattingMode="Display" UseLayoutRounding="True" SnapsToDevicePixels="True" WindowStyle="None" Background="Transparent" Foreground="White" FontSize="14"> <Window.Resources> <LinearGradientBrush x:Key="DefaultBackgroundBrush" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FF33B9AD" Offset="0" /> <GradientStop Color="#FF007ACC" Offset="1" /> </LinearGradientBrush> </Window.Resources> <shell:WindowChrome.WindowChrome> <shell:WindowChrome GlassFrameThickness="-1" CaptionHeight="40"/> </shell:WindowChrome.WindowChrome> <Grid> <Border Background="{StaticResource DefaultBackgroundBrush}" UseLayoutRounding="True" SnapsToDevicePixels="True" Margin="10"> <Border.Effect> <DropShadowEffect ShadowDepth="1" BlurRadius="6" Direction="270" Opacity="0.75" Color="#FF211613"/> </Border.Effect> </Border> <Grid Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition Height="60"/> </Grid.RowDefinitions> <Grid Height="40" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBlock Text="WPF开发者" VerticalAlignment="Center" Padding="10,0" FontSize="16"/> <Button Grid.Column="1" Style="{StaticResource CloseButton}" Width="30" Click="BtnCloseClick"> <Button.Content> <Path Data="{StaticResource ClosePath}" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" Height="12" Width="12" Stretch="Uniform" StrokeThickness="0"/> </Button.Content> </Button> </Grid> <StackPanel HorizontalAlignment="Center" Grid.Row="1"> <TextBlock Text="*国歌" HorizontalAlignment="Center" FontSize="20" Margin="0,10"/> <ItemsControl ItemsSource="{Binding MusicWordArray,RelativeSource={RelativeSource AncestorType=local:MainWindow}}"> <ItemsControl.ItemTemplate> <DataTemplate> <local:TextBlockCustomControl Text="{Binding SongWords}" StartDuration="{Binding StarTime}" Duration="{Binding RunTime}" Block.TextAlignment="Center" FontSize="15" Margin="0,4"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </Grid> </Grid> </Window>
三、MainWindow.xaml.cs代码如下:
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WPFSongWords { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public IEnumerable MusicWordArray { get { return (IEnumerable)GetValue(MusicWordArrayProperty); } set { SetValue(MusicWordArrayProperty, value); } } public static readonly DependencyProperty MusicWordArrayProperty = DependencyProperty.Register("MusicWordArray", typeof(IEnumerable), typeof(MainWindow), new PropertyMetadata(null)); public MainWindow() { InitializeComponent(); this.Loaded += MainWindow_Loaded; } private void MainWindow_Loaded(object sender, RoutedEventArgs e) { var musicWords = new List<MusicWord>(); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(1), StarTime = TimeSpan.FromSeconds(0), SongWords = "作词 : 田汉" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(1), StarTime = TimeSpan.FromSeconds(1), SongWords = "作曲 : 聂耳" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(2), SongWords = "起来!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(2), StarTime = TimeSpan.FromSeconds(2.5), SongWords = "不愿做奴隶的人们!!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(4), StarTime = TimeSpan.FromSeconds(4.5), SongWords = "把我们的血肉,筑成我们新的长城!"}); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(3), StarTime = TimeSpan.FromSeconds(8.5), SongWords = "中华民族到了最危险的时候," }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(3.5), StarTime = TimeSpan.FromSeconds(11.5), SongWords = "每个人*着发出最后的吼声。" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(15), SongWords = "起来!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(15.5), SongWords = "起来!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(16), SongWords = "起来!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(4.5), StarTime = TimeSpan.FromSeconds(16.5), SongWords = "我们万众一心,冒着敌人的炮火前进!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(2), StarTime = TimeSpan.FromSeconds(21), SongWords = "冒着敌人的炮火前进!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(23), SongWords = "前进!" }); musicWords.Add(new MusicWord { RunTime = TimeSpan.FromSeconds(0.5), StarTime = TimeSpan.FromSeconds(23.5), SongWords = "前进!进!" }); MusicWordArray = musicWords; } private void BtnCloseClick(object sender, RoutedEventArgs e) { Close(); } } public class MusicWord { public TimeSpan RunTime { get; set; } public TimeSpan StarTime { get; set; } public string SongWords { get; set; } } }
更多教程欢迎关注微信公众号:
WPF开发者QQ群: 340500857
blogs: https://www.cnblogs.com/yanjinhua/p/14345136.html
源码Github:https://github.com/yanjinhuagood/WPFDevelopers.git
gitee:https://gitee.com/yanjinhua/WPFDevelopers.git