ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

【WPF动画】实现水波纹动画进度条

【WPF动画】实现水波纹动画进度条

效果图


可以自己绘制成圆形等任意形状到Canvas

核心代码部分

绘制部分

//Value:当前进度值 _streamGeometry=GetSinGeometry(this.Width, -5,1/30.0,-this.Width+ this.Width * Value /100, this.Height - this.Height * Value /100);GeometryGroup group=new GeometryGroup();group.Children.Add(_streamGeometry);Path myPath=new Path{Fill=Brushes.DarkGreen, Data=group};//绘制 this.Canvas.Children.Add(myPath);

正弦曲线计算波纹

///<summary>/// 正弦曲线计算 ///</summary>///<paramname="waveWidth">水纹宽度</param>///<paramname="waveA">水纹振幅</param>///<paramname="waveW">水纹周期</param>///<paramname="offsetX">位移</param>///<paramname="currentK">当前波浪高度</param>///<returns></returns>private StreamGeometry GetSinGeometry(double waveWidth, double waveA, double waveW, double offsetX, double currentK){StreamGeometry g=new StreamGeometry();using StreamGeometryContext ctx=g.Open();ctx.BeginFigure(new Point(0, waveWidth), true,true);for(int x=0;x<waveWidth;x+=1){double y=waveA * Math.Sin(x * waveW + offsetX)+ currentK;ctx.LineTo(new Point(x, y), true,true);}ctx.LineTo(new Point(waveWidth, waveWidth), true,true);returng;}

源码传送门

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进