WPF實現音樂字幕動畫

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