作为产品设计中随处可见的进度条，它还能有什么花样呢？ 在上一篇进度条教程文章的基础上，本文作者修复了1个bug，优化了1个特性，新增了2个特性。 让我们来看看。
产品设计中随处可见的进度条，产品经理都能玩。 笔者通过这篇文章告诉你。
上次分享了《【Axure基础教程】没想到你是这样的进度条》，通过一个简单的进度条案例介绍了如何综合应用Axure的各种特性。 如果你忘记了或者没看过，记得去复习一下，否则你可能不知道这篇文章讲的是什么。
这次带来2.0分享，主要针对上次做的1.0，修复1个bug，优化1个特性，新增2个特性（会有新的知识点）。
1. 1个错误
这是我们上次做的进度条效果：
可以看到当进度条拖到最左端时，百分比不是0.00%。 出现这个问题是因为我们给进度条加了一个等于光标的宽度，所以当光标拖到最左端时，进度条也会有一个默认的宽度，这会导致计算出的百分比结果不是0.00 %:
那么怎么办，去掉这个宽度？ 但是去掉进度条就很丑了，如下图效果，而且这个也解决不了问题，因为拉到最右边的时候，进度条距离填满进度条容器还有一个光标宽度，所以要计算 100.00% 并不容易：
其实我在上一篇分享的时候就发现了这个问题，当时我已经想好了解决办法，但是因为篇幅太长，分了一个2.0来解决这个问题。 其实解决起来很简单，总分两步：
第一步，进度条不是+光标宽度，而是+1/2光标宽度，如下：
看看效果：
还是不是我们想要的效果。 相反，即使是拉到右端的百分比也不准确，但是可以发现当光标移动到左端和右端时，两端的值和期望值是一样的。 6.62%。 这种差异实际上是由 1/2 宽度引起的。 如果要解决这个问题，需要在第二步进行调整。
第二步：调整光标的活动边界。 最左端和最右端允许活动光标宽度增加 1/2：
再看看效果：
这次的百分比效果很完美，但是拉到最左边和最右边的时候，真的很难看，不过没关系，不是我偷懒，而是在真正的产品设计中，不像我绘制演示效果的进度条 这么粗，我给大家展示一个真实视频网站进度条的效果：
可以看出，在实际设计中游戏图片，进度条并没有那么粗。 一开始有一半的光标在视频画面外，但看起来并没有不一致，所以我们的bug应该解决了。 .
二、1优化
对于这个优化，我要优化的是百分比。 从下图可以看出，刚加载进度条的时候，已经有一个默认的进度了，但是百分比还是0.00%。 您需要拖动进度条来更改百分比。 这里需要优化 最重要的是当加载进度条的时候，百分比会显示准确的数值。 另外，我也希望这个百分比能够跟随光标，而不是固定在最右端，那就干吧。
这个很容易理解，记住我们的光标是什么unity加载场景进度条，是【动态面板】，我们只需要将这个百分比放到动态面板中即可，建议在【摘要】中直接将百分比拖到动态面板中，如果你如果你把它剪切粘贴进去，Axure会认为它是一个新的组件，所有与原组件相关的交互都需要重写。
让我们看看效果：
接下来只需要根据加载百分比时进度条的实际位置计算出正确的百分比即可。 这里只需要在【When loading】中设置百分比的文字，参数设置与拖动光标时设置文字的参数相同即可。 你可以：
刷新页面可以看到，默认的百分比也是可以的：
3. 魔术手指
接下来，将添加新功能。 目前进度条只能通过拖动光标来控制，但是现在几乎所有的进度条都支持点击跳转到相应的进度。 接下来，我们将实现这个功能。
先给进度条容器添加一个点击功能，点击的时候让光标移动到鼠标所在的位置：
因为我们只需要水平移动，光标的y值不变3D道具，x值就变成了鼠标所在位置的x值。 [Cursor.x]用于获取鼠标位置的x值，然后减去 1/ 2 光标的宽度。 这样做的目的是当光标移动到鼠标位置时，正好在鼠标中间，而不是在鼠标右边。 让我们看看效果：
可以看到当点击进度条容器时，效果和预期的一样，但是点击已经过去的进度条就没有反应了。 这是因为已经过去的进度条覆盖在进度条容器上面，所以这里不能点击，这里有两种解决方法，第一种是给已经过去的进度条添加同样的事件，另一种是把已经过去的进度条放到进度条容器下面，然后把进度条容器的填充颜色改成透明：
接下来给游标添加一个事件，这样当游标移动的时候，进度条可以根据游标的位置调整自己的宽度，并且可以正确的计算出百分比：
这里的事件可以直接从上面的拖拽事件复制粘贴过来，再看看修改后的效果：
这个“魔法手指”的功能就完成了。
4.行星碰撞
看到这里，你可能想知道我所有的能量是否都以它命名。 是啊，谁叫我不好好干活的？ 接下来要添加的功能严格来说并不是一般进度条的功能，主要是在视频网站用的比较多。 例如unity加载场景进度条，当前观看视频的哪些热点或关键点会被标记在进度条上。 当光标拖到附近时，如果离关键点足够近，就会“吸附”过去，这就是我们接下来要实现的功能。首先在进度条，为了演示方便，我把两个关键点命名为1和2：
然后给光标添加一个事件【当拖动结束时】，如果发现光标碰到了某个关键点，就会自动“吸收”过去：
如何判断光标碰到了关键点？ Axure的判断条件中，在【元件范围】中有【接触】和【不接触】的判断，可以用来判断两个元件是否接触。 我们来看看效果：
这还不够完美。 最后，我们需要给两个关键点添加点击事件。 点击时，直接将光标定位到关键点：
我们来看看最终的效果：
至此，进度条的所有分享教程就结束了。 如果本教程对您有用，请帮忙点“收藏”或“点赞”，感谢阅读！
