中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

作為產品設計中隨處可見的進度條，還能夠有什么花樣呢？本文作者在上篇進度條教程文章的基礎上，修復了1個bug，優化了1個特性，新增了2個新特性，一起來看一下吧。

產品設計中隨處可見的進度條，還能夠被產品經理玩出什么花兒來，作者通過本篇文章告訴你。

上次，我分享了《【Axure 基礎教程】沒想到你是這樣的進度條》，介紹通過一個簡單的進度條案例如何綜合應用 Axure 的各種特性，如果你已經忘記了或者沒有看過，記得去回顧一下哦，不然這篇文章有些內容你可能不知道在說什么。

這次，我帶來2.0的分享，主要是針對上次做的1.0，修復1個 bug，優化1個特性，新增2個新特性（會有新的知識點哦）。

一、1個bug

這是上次我們做的進度條效果：

可以看到，進度條拖拽到最左側的時候，百分比不是0.00%，出現這樣的問題是因為我們給進度條加了一個與游標相等的寬度，所以游標拖到最左端時，進度條也會有一個默認的寬度，就導致算出來的百分比結果不是0.00%：

那怎么辦，把這個寬度去掉嗎？但是去掉進度條又很難看，就像下面的效果，而且這樣也解決不了問題，因為拉到最右端的時候，進度條離填滿進度條容器還差一個游標的寬度距離，這樣算出來也不會是100.00%：

其實我在分享上一篇文章的時候已經發現這個問題，而且當時就已經想好解決方案，但是因為篇幅太長，所以就分了一個2.0出來專門解決這個問題，其實要解決很簡單，總共分兩步：

第一步，進度條不是+游標寬度，而是+1/2游標寬度，如下：

看看效果：

依然不是我們要的效果，反倒連拉到最右端的百分比也不準了，但是可以發現，現在游標移到最左端和最右端的時候，兩端的數值與期望值的差值是一樣的，都是6.62%，這個差值其實就是那1/2寬度造成的，想解決這個，就要靠第二步調整。

第二步：調整游標的活動邊界，最左端和最右端各自允許多活動1/2游標寬度：

再看看效果：

這次百分比效果是完美的，但是拉到最左端和最右端的時候，確實比較難看，不過沒關系，不是我偷懶，而是真實的產品設計中，不會像我這樣為了演示效果把進度條畫這么粗，給你看看一個真實的視頻網站進度條的效果：

可以看到，在實際設計時，進度條不會那么粗，剛開始的時候，游標有一半是在視頻畫面外，但是這樣看起來也毫無違和感，所以我們這個 bug 應該可以算是解決了。

二、1個優化

這個優化，我想優化的是百分比，下圖可以看出，在進度條剛載入的時候，已經有一個默認進度，但是百分比還是0.00%，需要拖動進度條百分比才會變，這里需要優化的是當進度條載入的時候，百分比就要顯示準確的值了，除此之外，我還希望這個百分比能跟隨游標，而不是固定在最右端，所以我們來動一下手吧。

跟隨的這個好做，還記得我們的游標是什么吧，是【動態面板】，我們只需要把這個百分比放到動態面板中去就可以，建議在【概要】中直接將百分比拖進動態面板，如果你是剪切粘貼進去，Axure 會認為這是一個新元件，跟原來元件有關的交互都需要重新寫。

看看效果吧：

接下來只需要在百分比加載的時候，根據進度條實際位置計算正確的百分比就可以了，這里只需要在【載入時】設置百分比的文本，設置參數跟拖動游標時設置文本用一樣的參數即可：

刷新頁面看看，默認百分比也有了：

三、魔法手指

接下來要新增特性了，這個進度條目前只能通過拖動游標來控制進度，但是現在幾乎所有的進度條都是支持點擊跳轉到對應的進度，接下來我們就來實現這個功能。

先給進度條容器添加點擊功能，點擊時讓游標移動到鼠標所在位置：

因為我們只需要水平移動，所以游標的 y 值還是保持不變，x 值變為鼠標所在的 x 值，【Cursor.x】就是用來獲取鼠標所在位置的 x 值的，然后再減去1/2游標的寬度，這樣做的目的是當游標移到鼠標位置的時候，是剛好在鼠標的正中間，而不是鼠標右邊，來看看效果：

可以看到，點擊進度條容器的時候，效果是符合預期的，但是點擊已經走過的進度條卻沒有反應，這是因為已經走過的進度條蓋在了進度條容器上方，所以這里點擊不了，這里有兩種解決方案，第一種就是給已經走過的進度條也添加相同事件，另外一種，就是把已經走過的進度條放到進度條容器底下，然后再把進度條容器的填充色改成透明即可：

接下來給游標添加事件，讓游標移動時，進度條能跟隨游標位置自行調整寬度，并且百分比能正確計算：

這里的事件直接從上方的拖動事件復制粘貼下來即可，改完后再來看看效果：

這個“魔法手指”的功能就完成了。

四、行星大碰撞

看到這里，你可能會懷疑我的精力是不是都拿來起名字了，是的，誰讓我不務正業呢，接下來要增加的這個功能，嚴格上來說不是通用進度條的特性，主要是在視頻網站用得比較多，比如當前觀看的視頻有哪些爆點或關鍵點，會在進度條上進行標記，當游標拖動到附近時，如果跟關鍵點離得足夠近，就會被“吸附”過去，這就是我們接下來要實現的功能，先給進度條添加所謂的爆點或關鍵點，為了方便演示，我給2個關鍵點命名為1和2：

然后給游標【拖動結束時】添加事件，如果發現游標接觸到了某個關鍵點，就自動“吸附”過去：

怎么判斷游標接觸到關鍵點呢，在 Axure 判斷條件中有個【元件范圍】的【接觸】與【未接觸】判斷，可以用來判斷兩個元件是否有接觸，我們來看看效果吧：

這樣還不夠完美，最后我們需要給兩個關鍵點添加點擊事件，點擊的時候，直接將游標定位到關鍵點：

來看看最后的效果吧：

至此，進度條的所有分享教程就結束了，如果該教程對你有用，請幫忙點個“收藏”或“喜歡”，感謝閱讀！