• <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商城

      左右設限滑塊頁眉菜單欄(仿今日頭條APP)

       

      1.相關介紹

      全部產品所在的店鋪地址:https://www.axureshop.com/shop/3039

      與此相關的完整版高保真實戰項目(UE&UI)原型設計(針對于全息中繼器組件)地址:https://www.axureshop.com/a/249709.html

      與此相關的完整版高保真實戰項目(UE&UI)原型設計(PC端+手機端)地址(這個性價比很高,推薦路過的朋友購買):https://www.axureshop.com/a/234122.html#comment-287804

      與此相關的完整版高保真實戰項目(UE&UI)原型設計(手機端)地址:https://www.axureshop.com/a/246479.html

      與此相關的完整版高保真實戰項目(UE&UI)原型設計(PC端)地址:https://www.axureshop.com/a/298707.html

      本項目完整版高保真實戰原型(UE&UI)設計(PC端)地址:https://www.axureshop.com/a/674824.html

      1.1頁面布局

      1.1.1頁面設定

      新建一個頁面,命名為【左右設限滑塊頁眉菜單欄】。

      在【左右設限滑塊頁眉菜單欄】內新建命名為【【左右設限滑塊頁眉菜單欄】的動態面板,動態面板的【State1】更改為【全部】,在【全部】內新建一個命名為【右浮圖標】的【組合文件】和一個命名為【切換菜單】的【動態面板】,【切換菜單】內的【State1】更改【文本】。

      1.1.1.1【右浮圖標】

      從元件庫內分別拉入兩個【矩形】元件分別做圖標的圖標背景1和圖標背景2。

      圖標背景1的【填充】色為#ffffff,透明度為30%,圖標背景2的【填充】色為#ffffff,透明度為90%,切圖標背景2的X大于圖標背景2X的8px,然后將圖標嵌入圖標背景1和圖標背景2兩者形成的半透明上下左右居中區域。

       

      1.1.1.2【切換菜單】

      從元件庫內分別拉入14個【文本標簽】元件依次在切換菜單規定的區域范圍內排序成行,并依次將內容更改為1至14的數字。

      【文本標簽】的【填充】色皆為透明,字體顏色#666666。

      1.2動態交互

      1.2.1效果設計

      1.2.1.1圖標交互樣式設置

      選中【圖標】,進行【交互樣式設置】,將鼠標懸停、鼠標按下、選中的交互樣式的另一種狀態的【圖片】導入。

      1.2.1.2文本標簽的交互樣式設置

      選中表現1至14個數字的【文本標簽】元件,進行【交互樣式設置】,將鼠標懸停、鼠標按下、選中的交互樣式的【字體顏色】進行設置。

      1.2.2交互流程

      1.2.2.1實現左右設限滑塊頁眉菜單欄的動態交互

      選中【左右設限滑塊頁眉菜單欄】動態面板內的【全部】,在【屬性】中設定【向左拖動結束時】和【向右拖動結束時】的用例,配置相關的動作。

      步驟一:設置【向左拖動結束時】用例的配置動作

      在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選【切換菜單】動態面板,設置【移動】為【經過】狀態,x=-150,y=y,【動畫】為【緩進緩出】,時間t=2000毫秒,【界限】中添加【左側】邊界,且大于等于-338。

      步驟二:設置【向右拖動結束時】用例的配置動作

      在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選【切換菜單】動態面板,設置【移動】為【經過】狀態,x=-200,y=y,【動畫】為【緩進緩出】,時間t=2000毫秒,【界限】中添加【左側】邊界,且小于等于0。

      1.3預覽效果

      1.4結語

      結語:請路過的朋友們多多支持哈,臥枕江山在這里先謝謝了,以后會有更多優質的文章和產品在這個平臺上進行發布,請盡請期待呦!

       

       

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

      Axure9入門篇:Axure9 工作界面概述

      2019-4-20 20:26:34

      Axure教程

      360等瀏覽器預覽Axure9.0原型時,提示版本過時的解決方案

      2019-4-26 17:51:33

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯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">