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
黄山市民网：https://www.huangshanshimin.com/
