• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      老案例新做:顯示進度的橫向滑塊

      寫在前面:本站以前有很多案例教程,隨著axure軟件的升級,可能有些地方已經不正確了。隨著時間推移,可能有些案例的下載地址也失效了。所以黃老師近期會推出一個系列教程,就是把以前的案例用最新的axure8.0重新做一遍。

      夢兒以前給大家分享了一個顯示進度的滑動塊案例,里面一堆函數和公式,對于新手來說很暈。黃老師給大家做了一個簡單的,便于新手理解。思路和原文是一樣一樣的。

      下載地址:點擊下載>>?預覽地址:http://ybt2uz.axshare.cn/#g=1&p=index

      構成元件就三個。

      1、一個背景(矩形,寬600,高30,圓角半徑15)命名為beijing.

      2、一個進度條(復制背景,設置背景顏色為藍色,寬度設置為30)命名為jindu。

      3、一個圓形。將圓形轉換成動態面板。命名為yuanquan.

      黃老師的命名規則就是這么簡單粗暴。

      為了方便理解,進度條是靠著Y軸的,這樣可以少考慮一個參數。

      拖動圓形(動態面板)的時候,添加三個交互:

      1、移動當前元件,水平拖動。設置拖動邊界,左側大于等于0,右側小于等于背景的長度。

      這一步是讓這個圓圈在背景條上可以拖動起來。

      2、設置進度條的尺寸,寬度為:[[yuanquan.x+yuanquan.width]],注意要添加局部變量yuanquan指的是動態面板圓圈。錨點在左側。

      這一步是讓進度條跟著動起來。

      3.設置圓形上的元件文字=[[Math.floor((jindu.width-30)*100/570)]],注意添加局部變量。

      這個是設置圓形上的文字。公式計算的是當前位置的百分比。由于本身有30寬,所以計算百分比的時候分子分母都需要減去30。不然就不是從零開始的了。Math.floor()是向下取整,也就是把小數點后面的數字抹掉,不然算出來會有長尾巴。

      這樣就做完了,新手要注意一下三個元件的層級順序,圓圈在最上面,進度在中間,背景在最底下。在概要面板里面可以拖動調整元件的層級。

      給TA買糖
      共{{data.count}}人
      人已贊賞
      高級教程

      使用Axure管理團隊項目圖文教程 團隊協作操作步驟

      2017-4-12 14:58:53

      高級教程

      Axure中SVG矢量圖標的使用方法及資源推薦

      2017-6-12 21:33:16

      axure商城
      2 條回復 A文章作者 M管理員
      1. 艾斯

        老師,為什么我的不動?

      2. 夏末
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">