如何用UWP开发波浪形的进度条？

本文共计2121个文字，预计阅读时间需要9分钟。

很久没写blog了，一个是忙，另一个是觉得没什么好写的。废话不多说，直接上图：

可能看到这波浪线你会觉得很难，但看完这篇blog后，你应该也会像我一样豁然开朗。图上的形状，……。

好久没写 blog 了，一个是忙，另外一个是觉得没啥好写。废话不多说，直接上效果图：

可能看到这波浪线你觉得会很难，但看完这篇 blog 后应该你也会像我一样恍然大悟。图上的图形，我们可以考虑是由 3 条直线和 1 条曲线组成。直线没什么难的，难的是曲线。在曲线这一领域，我们有一种特殊的曲线，叫贝塞尔曲线。

在上面这曲线，我们可以对应到的是三次方贝塞尔曲线，它由 4 个点控制，起点、终点和两个控制点。这里我找了一个在线的 demo：www.bezier-curve.com/

调整控制点 1（红色）和控制点 2（蓝色）的位置我们可以得到像最开始的图那样的波浪线了。

另外，我们也可以注意到一个性质，假如起点、终点、控制点 1 和控制点 2 都在同一条直线上的话，那么我们这条贝塞尔曲线就是一条直线。

按最开始的图的动画，我们最终状态是一条直线，显然就是需要这 4 个点都在同一直线上，然而在动画过程中，我们需要的是一条曲线，也就是说动画过程中它们不会在同一直线上了。我们也可以注意到，在波浪往上涨的时候，左边部分是凸起来的，而右半部分是凹进去的。这对应了控制点 1 是在直线以上，而控制点 2 在直线以下。