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

      動態由右向左橫軸自動滾動通知公告設計

      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頁面設定

      新建一個頁面文件,命名為【橫軸動態滾動通知公告】。

      在【橫軸動態滾動通知公告】頁面內新建一個命名為【橫軸動態滾動通知公告】的【組合文件】,并在【組合文件】內新建命名為【公告輪播】的動態面板和命名為【布局內容】的【組合文件】。

      1.1.1.1【布局內容】

      從元件庫內分別拉入四個【矩形】元件分別做【標題】、【一級背景圖層】、【二級背景圖層】、【三級背景圖層】。

      【一級背景圖層】的【填充】色為#ffffff,【二級背景圖層】的【填充】色為#ffffff,有上下兩個邊框,邊框樣式為中粗,顏色為#06c1fa,【三級背景圖層】的【填充】色為#ffffff,有邊框,邊框樣式為細,顏色為#f2f2f2。

      【標題】元件做成按鈕的樣式,有陰影、有邊框,左上和右上為圓角,切處于選中狀態。

      將【圖標】拖入【標題】之后,期間的距離為10px。

      1.1.1.2【公告輪播】

      將【公告輪播】內的【State1】改為【公告】,在公告內新建一個命名為【輪播區域】的動態面板,并將【輪播區域】的動態面板分為四頁。

      從元件庫內分別在冬天面板【輪播區域】內拖入一個【文本標簽】,透明度為100%。

      1.2動態交互

      1.2.1效果設計

      1.2.1.1圖標交互樣式設置

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

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

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

      1.2.1.3矩形的交互樣式設置

      選中【標題】元件,進行【交互樣式設置】,將鼠標懸停、鼠標按下、選中的交互樣式的【字體顏色】和【字段顏色】進行設置,并設定【鼠標單擊時】的用例交互動作,配置【選中】動作為true。

      1.2.2交互流程

      1.2.2.1實現橫軸動態滾動通知公告的動態交互

      選中【公告輪播】動態面板中【公告】內的【輪播區域】,在【屬性】中設定【向左拖動結束時】、【向右拖動結束時】和【載入時】的交互用例,并配置相關的動作。

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

      在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選Set當前元件,設置當前【動態面板】的選擇狀態為【Next】,【進入動畫】和【退出動畫】全部設定成【向左滑動】,時間t=20000毫秒,勾選【推動/拉動元件】,勾選【下方】【方向】,【動畫】設定成【緩進緩出】的狀態,時間t=500毫秒。

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

      在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選Set當前元件,設置當前【動態面板】的選擇狀態為【Previous】,勾選【向前循環】,【進入動畫】和【退出動畫】全部設定成【向左滑動】,時間t=20000毫秒,勾選【推動/拉動元件】,勾選【下方】【方向】,【動畫】設定成【緩進緩出】的狀態,時間t=500毫秒。

      步驟三:設置【載入時】用例的配置動作

      在case1【組織動作】中添加【其他】中的【等待】動作,設定【等待】的時間(Wait time)為1000毫秒。

      添加【移動】動作,在【配置動作】內勾選【輪播區域】動態面板,設置當前【動態面板】的選擇狀態為【Next】,依次勾選【向后循環】和【循環間隔】,并設定【循環間隔】的時間為5000毫秒,設定【進入動畫】和【退出動畫】全部設定成【向左滑動】,時間t=20000毫秒,勾選【推動/拉動元件】,勾選【下方】【方向】,【動畫】設定成【緩進緩出】的狀態,時間t=500毫秒。

      1.3預覽效果

      1.4結語

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

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

      具有一定交互功能的動態彈窗設計

      2019-4-9 23:12:21

      Axure教程

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

      2019-4-20 20:26:34

      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">