网络有众多介绍仿制Windows10进程条的小说

意气风发、其实有现存的

  先来拜候Windows10进程条的二种方式:

 图片 1

 

  网络有无数介绍仿制Windows10进程条的小说,也都完毕了科学的固守。而自己再开一文的因由是感觉假若在此根基上增添一些成效,比方圆点的多寡,圆点的轻重等等,效果兴许会更加好有的。接触过UWP的敌人应该清楚,其框架中自带了进度条控件,以 ProgressRing 为例,通过Blend,大家能够收获到控件的XAML,以下是有个别截图:

 图片 2

  粗略豆蔻年华看,只要稍作匡正便能用到WPF中——大家大约能够怎么都不做!

 

二、加多效能

  假设要改换圆点的数码,圆点的大小还是圆点的移动速度,大家该怎么兑现啊?继承章节一中的XAML,并基于所需调治模板就展现太艰难了,那会让大家的样式文件突显丰腴不堪,所以选拔纯粹的C#代码来促成它只怕正如明智。然而以前的XAML亦不是错误,起码它交给了环形进程条的首要帧动漫的组成,这么些新闻对大家的话超级重大,免去了小编们和好去深入分析的手续。

  今后我们的根本办事正是让写死的关键帧能够因而品质灵活配置,所以大家或者须求先编码风度翩翩份进度条的基类( LoadingBase 卡塔 尔(阿拉伯语:قطر‎,以提取两系列型进度条的共性。基类中定义8个属性,分别是 IsRunning 、 DotCount 、 DotInterval 、 DotBorderBrush 、 DotBorderThickness 、 DotDiameter 、 DotSpeed 、 DotDelayTime ,它们的意义已是自注释的,不必赘述。而在环形进程条中,还有其它两本性子: DotOffSet 和 NeedHidden ,分别代表圆点全体的义务偏移和在移动中是否必要掩盖圆点。

 

三、关键帧动漫

  最终一步正是用C#代码完毕重大帧动漫,可是得先有米本事做饭,故而需求先创建圆点:

 1 protected Ellipse CreateEllipse(int index)
 2         {
 3             var ellipse = new Ellipse();
 4             ellipse.SetBinding(WidthProperty, new Binding("DotDiameter") {Source = this});
 5             ellipse.SetBinding(HeightProperty, new Binding("DotDiameter") {Source = this});
 6             ellipse.SetBinding(Shape.FillProperty, new Binding("Foreground") {Source = this});
 7             ellipse.SetBinding(Shape.StrokeThicknessProperty, new Binding("DotBorderThickness") {Source = this});
 8             ellipse.SetBinding(Shape.StrokeProperty, new Binding("DotBorderBrush") {Source = this});
 9             return ellipse;
10         }

  上边的艺术在进程条基类中达成,仅仅是用相关的属性初叶化了我们的原料:圆点。由于环形进度条在X、Y轴方向都有移动,所感觉了便利,大家能够思虑在圆点外面再包风姿罗曼蒂克层 Border 作为看不见的壳,大家将圆点与壳尾部对齐,现在即使让壳绕中央旋转就核心落到实处了目的,上面是环形进程条1个点到5个点带壳的暗意图:

图片 3

  想豆蔻梢头想,若无那层壳,我们又有啥代替格局,那个主意是不是都以颇为便利的?大概没有那层壳,就要求去研究怎么转移圆点的 RenderTransformOrigin ,好让它们看起来都是围绕一个点旋转的,尽管改动了进程条全体的尺寸。套壳的代码如下:

 1 private Border CreateBorder(int index)
 2         {
 3             var ellipse = CreateEllipse(index);
 4             ellipse.HorizontalAlignment = HorizontalAlignment.Center;
 5             ellipse.VerticalAlignment = VerticalAlignment.Bottom;
 6             var rt = new RotateTransform
 7             {
 8                 Angle = -DotInterval * index
 9             };
10             var myTransGroup = new TransformGroup();
11             myTransGroup.Children.Add(rt);
12             var border = new Border
13             {
14                 RenderTransformOrigin = new Point(0.5, 0.5),
15                 RenderTransform = myTransGroup,
16                 Child = ellipse,
17                 Visibility = NeedHidden ? Visibility.Collapsed : Visibility.Visible
18             };
19             border.SetBinding(WidthProperty, new Binding("Width") { Source = this });
20             border.SetBinding(HeightProperty, new Binding("Height") { Source = this });
21 
22             return border;
23         }

  套壳代码除了套壳和血脉相同的初始化,最重视的是19和20行的宽高绑定,那是让圆点旋转中央始终唯意气风发的最重要。有了上述的预备,大家终归能够起头for循环了:

 1 //定义动画
 2 Storyboard = new Storyboard
 3 {
 4     RepeatBehavior = RepeatBehavior.Forever
 5 };
 6 
 7 for (var i = 0; i < DotCount; i++)
 8 {
 9     //在这里创建圆点  
10 }

  上面正是最大旨的第生机勃勃帧动漫,通过从前用Blend提抽取来的XAML,大家得以看来它使用了 SplineDoubleKeyFrame ,那会涉及二遍贝塞尔曲线的调节点,思考到易用性,大家会用 LinearDoubleKeyFrame 和 EasingDoubleKeyFrame 代替。在XAML中大家最关心的器重字应该是角度,在时间片的哪生龙活虎部分,圆点应该在何方,而又在怎样时候,圆点应该会熄灭,大家只要随意截取四个点的关键帧就能够获得上述全体新闻:

图片 4

图片 5

 

  下面两张分别是圆点1和2光滑度和地点的关键帧截图,通过三个点大家一起能够猜测全数一些。出于个人喜欢,作者将光滑度替换到了 Visibility 的切换,所以还有大概会引入 DiscreteObjectKeyFrame 。篇幅原因,我们一贯计算深入分析结果:

  • 一同头全体一点都以显得的,不过地方不相同,从点1的-110度开头,角度每个减6;
  • 点1开始活动后,0.167秒(1/6秒卡塔尔后点2方始活动,所以各点动漫延迟时间为1/6秒(这里不太能鲜明是还是不是和圆点数量有关卡塔 尔(阿拉伯语:قطر‎;
  • 以点1为例,旋转角度随即间变化图如下:

图片 6图片 7图片 8图片 9图片 10图片 11图片 12

  从地点7张图中得以观察,在二回巡回中式茶食1是如此活动的:减速、匀速、加快、减速、匀速、加快,而且与之相应的角度地点也提交了,最终瓜熟蒂落,环形进程条就到位了。

 

四、截图

  通过设置不相同的习性,能够兑现分歧的效率:

  图片 13

 

五、源码

  本文所商讨的进程条源码已经在github开源:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website