所以我写了个测试动画性能的小程序亚洲必赢手

作者:养生心得
小跑的点

小跑的点,笔者用了叁个Grid里面套了三个path和贰个Ellipse.

椭圆做阴影,颜色和轨道同样,加三个晶莹剔透掩码OpacityMask,里面是多个放射型的渐变画刷RadialGradientBrush.原点GradientOrigin(0.8,0.5卡塔尔(قطر‎ offset0处安装为不透明,offset1处不反射率设置为2/16.

水滴型的path小编就用blend里的钢笔随便画了一个,获得了它的Data. Fill给二个线型渐变画刷,StartPoint(0,0卡塔尔(قطر‎,EndPoint(1,0卡塔尔国,offset0给叁个半晶莹剔透的轨迹色,offset1给个不透明的天青.

这么些Grid的IsHitTestVisible能够安装成false,不参加命中测验,那样鼠标在轨道上时,点通过时,不会拥塞轨迹ToolTip的彰显.

代码控,想协和写path的话,思路能够参照作者的另大器晚成篇博客 WPF绘制轻易常用的Path

点沿着轨迹跑的动漫片

那有的动画片,小编就隐蔽了,参照他事他说加以考查周银辉的博客 

 

 

效果图:

亚洲必赢手机app 1

城市的圆

他正是个圆圈,没什么好说的,注意一下中坚的长久就能够了 Ellipse 颜色和轨迹同样 ToolTip写上你想体现的事物

进而wpf做那些事物自然是全然没极度的.附上这几个小程序 动漫片质量测量试验 风乐趣的仇人能够开点动漫看看windows职分微机里的cpu和内部存款和储蓄器的消耗景况

GitHub地址:

先说下大概的思绪吧:

移动轨迹

本人用的是弧线ArcSegment 八个都市的点分明了,那么能够通过多个点的x,y,根据勾股定理计算出线段的长度.给一个点,连接那五个城市的点,能够组合一个三角形,几个都市整合的线条对面包车型地铁丰富角能够设置成一个角度参数,

以此线条固定,对角的角度固定,那么他所对应的外接圆的半圆形正是固定的.大家能够依据正弦定理a/sinA=2r求出外接圆的半径.就足以画出那些弧线来了.然后方可给那几个path的ToolTip附上鼠标移上去想突显的文字.改下ToolTip的体裁就可以了

地图

至于找地图,不佳找,笔者未曾怎么好的心得.反正目标正是找叁个蕴含省会标志的地图矢量图,只借使矢量图,我们就相应有艺术把他转变到Xmal.

本人是在百度文Curry找到一个ppt版的矢量地图,0下载券 矢量地图素材 下载下来后用ppt张开,要用微软的,别的大概保留不了源文件,右键地图=>另存为=>选.emf格式,然后用Microsoft Expression Design张开,然后右键=>导出

亚洲必赢手机app 2

那般就赢得了我们要的path,然后找到每一个省集会场地对应的path,取他们的Canvas.Left Width/2 Canvas.Top Height/2 正是对应坐标点的(x,y卡塔尔(英语:State of Qatar).(作者算的没那样精美,正是大意加了下.那么些工作太干燥,这不是着重.卡塔尔(قطر‎

先嗤笑下笔者找的那个地图,法国首都和科威特城是连在一齐的,驻马店也破灭不见了,3个城市中华全国总工会体合成了一个path.所以提出大家温馨再去找找

瞩目wpf的坐标都以以左上角开端的(0,0)向右加x值 向下加y值 前边大家转移的图形定位时都要 x值-本身Width/2 y值-本身Height/2 那样才干让图形的着力对准供给一定的坐标点

有了地图和坐标,我们就足以做上面包车型大巴专门的学业了

关于为之侧目标百度Echarts小编就非常少说了 不打听的朋友从来看官方的例子吧 

布局

先前时代的开始的生龙活虎段时代,大家得先思量布局,为了防守后生可畏旦做成顾客控件的话,设置尺寸时地图走形.

  1. 最外层肯定要用Viewbox,按百分比缩放.供给在乎的是,Viewbox内部放的控件是必需有现实的尺码的,它技艺扩充缩放,当然不肯定一定要显式的去设置内部的Width和Height,只要此中有实际意义上的尺寸就可以.
  2. Viewbox内先放贰个Grid,分成两列Width全体安装成auto,那样能根据此中央调节件的实在尺寸来决定列宽.
  3. 0列放一个StackPanel.这几个是右手当菜单用的RadioButton的器皿,种种RadioButton都有实际的宽度,所以0列就有了现实的宽窄
  4. 1列再放四个Grid,这几个Grid必定要安装HorizontalAlignment="Left" VerticalAlignment="Top",正是靠左上角构造,那样她个中的控件就能够给它撑起来,也就有了切实可行的尺寸,那样Viewbox能力够缩放
  5. 把地图的path全体放到这么些Grid里,path的Stretch必得是None,那样path就能够把这几个Grid给撑起来,在此个Grid里面装有path的上面再放叁个Grid,用来做变通的卡通片用的图纸的容器,他的坐标是和父级Grid的坐标重合的

 

  1. 要是你没有搞规划的帮您做地图的话,基本得去互连网找矢量地图,转后更改到path
  2. 找到省会城市的坐标,那正是活动轨迹的源点和顶峰
  3. 依靠起点终点生成运动轨迹的path和跑动的点,在点上做路线动漫,生成八个圆,中央放到到达城市的坐标处
  4. 开始化进程的动漫
都会的圆的动漫片

给Ellipse的透明掩码OpacityMask加一个放射型的渐变画刷RadialGradientBrush,加八个节点,offset0,offset1都以不透明的,在他们中间加一个全然透明的节点,然后动漫调整offset值由0到1或由1到0,效果差别.

转移动漫所急需的奔跑的点,运动轨迹的path,表示达到城市的圆形

关于可行性:早前常听人说wpf动漫开多了会很卡,而作者也尚无写过含有多量动漫片的类型,不知底实际怎么着,这些地图分明全部都是卡通,所以自个儿写了个测量试验动漫品质的小程序,生成九十六个点和线跑动漫,发掘完全未有啥难题.

动画

开首化进程的动漫片

那有的卡通其实正是精兵简政时间,在适当的光阴初始合适的动漫.

一抬手一动脚轨迹的显现:正是给移动轨迹path的晶莹掩码给多个线型渐变画刷,依照向左,右,上,下移动,设置好StartPoint和EndPoint,然后多少个节点一个透明,一个不透明,同不常间从0向1做动漫,须求在意的是要是生机勃勃前后生可畏后运动,必供给透明的特别节点在前边运动,

要不然会身不由己很魔幻的一言一行,把那个动漫的时间设置成跑动的点的二分一的时间.那样轨迹比点跑的快,不至于点跑过去了,路径还一向不显现到那

有关城市的圆,那有个别加的超多,首先能够用八个DoubleAnimation来调控Ellipse的折射率,开始时间是轨道突显的小时,也等于点的时间/2,那样正巧轨迹展现到圆时,圆起首显现,动漫时间也设置成轨迹呈现时间,那样正好点运动到圆的时候,圆已经完全表现完.

接下来加叁个ColorAnimation,来决定圆透明掩码里放射画刷的第贰个节点,也正是调节点,让他成为透明,用时0就足以,那样就能够一而再三番五次圆的放射型动漫了.开头时间就是点运动到圆的时间.

接下去正是局地RadioButton,ToolTip,Path的样式难题了.那有的大家看情绪,做个和睦喜好的体制就能够了.

 

2016-08-01更新:

将名称注册动漫改为目注脚册动漫

亚洲必赢手机app 3亚洲必赢手机app 4

  1         private void AddPointToStoryboard(Grid runPoint, Ellipse toEll, Storyboard sb, Path particlePath, double l, ProvincialCapital from, MapToItem toItem)
  2         {
  3             double pointTime = l / m_Speed;//点运动所需的时间
  4             double particleTime = pointTime / 2;//轨迹呈现所需时间(跑的比点快两倍)
  5             ////生成为控件注册名称的guid
  6             //string name = Guid.NewGuid().ToString().Replace("-", "");
  7 
  8             #region 运动的点
  9             TransformGroup tfg = new TransformGroup();
 10             MatrixTransform mtf = new MatrixTransform();
 11             tfg.Children.Add(mtf);
 12             TranslateTransform ttf = new TranslateTransform(-runPoint.Width / 2, -runPoint.Height / 2);//纠正最上角沿path运动到中心沿path运动
 13             tfg.Children.Add(ttf);
 14             runPoint.RenderTransform = tfg;
 15             //this.RegisterName("m"   name, mtf);
 16 
 17             MatrixAnimationUsingPath maup = new MatrixAnimationUsingPath();
 18             maup.PathGeometry = particlePath.Data.GetFlattenedPathGeometry();
 19             maup.Duration = new Duration(TimeSpan.FromSeconds(pointTime));
 20             maup.RepeatBehavior = RepeatBehavior.Forever;
 21             maup.AutoReverse = false;
 22             maup.IsOffsetCumulative = false;
 23             maup.DoesRotateWithTangent = true;
 24             //Storyboard.SetTargetName(maup, "m"   name);
 25             //Storyboard.SetTargetProperty(maup, new PropertyPath(MatrixTransform.MatrixProperty));
 26             Storyboard.SetTarget(maup, runPoint);
 27             Storyboard.SetTargetProperty(maup, new PropertyPath("(Grid.RenderTransform).Children[0].(MatrixTransform.Matrix)"));
 28             sb.Children.Add(maup);
 29             #endregion
 30 
 31             #region 达到城市的圆
 32             //this.RegisterName("ell"   name, toEll);
 33             //轨迹到达圆时 圆呈现
 34             DoubleAnimation ellda = new DoubleAnimation();
 35             ellda.From = 0.2;//此处值设置0-1会有不同的呈现效果
 36             ellda.To = 1;
 37             ellda.Duration = new Duration(TimeSpan.FromSeconds(particleTime));
 38             ellda.BeginTime = TimeSpan.FromSeconds(particleTime);//推迟动画开始时间 等轨迹连接到圆时 开始播放圆的呈现动画
 39             ellda.FillBehavior = FillBehavior.HoldEnd;
 40             //Storyboard.SetTargetName(ellda, "ell"   name);
 41             //Storyboard.SetTargetProperty(ellda, new PropertyPath(Ellipse.OpacityProperty));
 42             Storyboard.SetTarget(ellda, toEll);
 43             Storyboard.SetTargetProperty(ellda, new PropertyPath(Ellipse.OpacityProperty));
 44             sb.Children.Add(ellda);
 45             //圆呈放射状
 46             RadialGradientBrush rgBrush = new RadialGradientBrush();
 47             GradientStop gStop0 = new GradientStop(Color.FromArgb(255, 0, 0, 0), 0);
 48             //此为控制点 color的a值设为0 off值走0-1 透明部分向外放射 初始设为255是为了初始化效果 开始不呈放射状 等跑动的点运动到城市的圆后 color的a值才设为0开始呈现放射动画
 49             GradientStop gStopT = new GradientStop(Color.FromArgb(255, 0, 0, 0), 0);
 50             GradientStop gStop1 = new GradientStop(Color.FromArgb(255, 0, 0, 0), 1);
 51             rgBrush.GradientStops.Add(gStop0);
 52             rgBrush.GradientStops.Add(gStopT);
 53             rgBrush.GradientStops.Add(gStop1);
 54             toEll.OpacityMask = rgBrush;
 55             //this.RegisterName("e"   name, gStopT);
 56             //跑动的点达到城市的圆时 控制点由不透明变为透明 color的a值设为0 动画时间为0
 57             ColorAnimation ca = new ColorAnimation();
 58             ca.To = Color.FromArgb(0, 0, 0, 0);
 59             ca.Duration = new Duration(TimeSpan.FromSeconds(0));
 60             ca.BeginTime = TimeSpan.FromSeconds(pointTime);
 61             ca.FillBehavior = FillBehavior.HoldEnd;
 62             //Storyboard.SetTargetName(ca, "e"   name);
 63             //Storyboard.SetTargetProperty(ca, new PropertyPath(GradientStop.ColorProperty));
 64             Storyboard.SetTarget(ca, toEll);
 65             Storyboard.SetTargetProperty(ca, new PropertyPath("(Ellipse.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Color)"));
 66             sb.Children.Add(ca);
 67             //点达到城市的圆时 呈现放射状动画 控制点的off值走0-1 透明部分向外放射
 68             DoubleAnimation eda = new DoubleAnimation();
 69             eda.To = 1;
 70             eda.Duration = new Duration(TimeSpan.FromSeconds(2));
 71             eda.RepeatBehavior = RepeatBehavior.Forever;
 72             eda.BeginTime = TimeSpan.FromSeconds(particleTime);
 73             //Storyboard.SetTargetName(eda, "e"   name);
 74             //Storyboard.SetTargetProperty(eda, new PropertyPath(GradientStop.OffsetProperty));
 75             Storyboard.SetTarget(eda, toEll);
 76             Storyboard.SetTargetProperty(eda, new PropertyPath("(Ellipse.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"));
 77             sb.Children.Add(eda);
 78             #endregion
 79 
 80             #region 运动轨迹
 81             //找到渐变的起点和终点
 82             Point startPoint = GetProvincialCapitalPoint(from);
 83             Point endPoint = GetProvincialCapitalPoint(toItem.To);
 84             Point start = new Point(0, 0);
 85             Point end = new Point(1, 1);
 86             if (startPoint.X > endPoint.X)
 87             {
 88                 start.X = 1;
 89                 end.X = 0;
 90             }
 91             if (startPoint.Y > endPoint.Y)
 92             {
 93                 start.Y = 1;
 94                 end.Y = 0;
 95             }
 96             LinearGradientBrush lgBrush = new LinearGradientBrush();
 97             lgBrush.StartPoint = start;
 98             lgBrush.EndPoint = end;
 99             GradientStop lgStop0 = new GradientStop(Color.FromArgb(255, 0, 0, 0), 0);
100             GradientStop lgStop1 = new GradientStop(Color.FromArgb(0, 0, 0, 0), 0);
101             lgBrush.GradientStops.Add(lgStop0);
102             lgBrush.GradientStops.Add(lgStop1);
103             particlePath.OpacityMask = lgBrush;
104             //this.RegisterName("p0"   name, lgStop0);
105             //this.RegisterName("p1"   name, lgStop1);
106             //运动轨迹呈现
107             DoubleAnimation pda0 = new DoubleAnimation();
108             pda0.To = 1;
109             pda0.Duration = new Duration(TimeSpan.FromSeconds(particleTime));
110             pda0.FillBehavior = FillBehavior.HoldEnd;
111             //Storyboard.SetTargetName(pda0, "p0"   name);
112             //Storyboard.SetTargetProperty(pda0, new PropertyPath(GradientStop.OffsetProperty));
113             Storyboard.SetTarget(pda0, particlePath);
114             Storyboard.SetTargetProperty(pda0, new PropertyPath("(Path.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"));
115             sb.Children.Add(pda0);
116             DoubleAnimation pda1 = new DoubleAnimation();
117             //pda1.From = 0.5; //此处解开注释 值设为0-1 会有不同的轨迹呈现效果
118             pda1.To = 1;
119             pda1.Duration = new Duration(TimeSpan.FromSeconds(particleTime));
120             pda1.FillBehavior = FillBehavior.HoldEnd;
121             //Storyboard.SetTargetName(pda1, "p1"   name);
122             //Storyboard.SetTargetProperty(pda1, new PropertyPath(GradientStop.OffsetProperty));
123             Storyboard.SetTarget(pda1, particlePath);
124             Storyboard.SetTargetProperty(pda1, new PropertyPath("(Path.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"));
125             sb.Children.Add(pda1);
126             #endregion
127         }

View Code

2016-12-19更新:

发布到GitHub,地址:

 

源码下载:仿百度Echarts人口迁移图.zip

本文由56net亚洲必赢发布,转载请注明来源

关键词: 亚洲必赢 WPF