WPF实现音乐字幕动画

2022-03-24 00:37:43

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

WPF实现音乐字幕动画

码农公寓

相关文章