<bdo id="r1ift"></bdo>
  • <bdo id="r1ift"></bdo>

    1. <tbody id="r1ift"><span id="r1ift"><address id="r1ift"></address></span></tbody>
      <nobr id="r1ift"><optgroup id="r1ift"></optgroup></nobr>

      <track id="r1ift"></track>

      Axure:APP懸浮菜單的動態導航

      述了APP中懸浮式菜單導航的動態展開與收起的過程,一起來看看~

      Axure:APP懸浮菜單的動態導航

      先看效果:

      Axure:APP懸浮菜單的動態導航

      體驗地址:https://pikopc.axshare.com

      一、操作分析

      1. 點擊加號按鈕,加號順時針旋轉45度,變成關閉按鈕,扇形菜單欄以按鈕為中心彈出。
      2. 點擊關閉按鈕,×逆時針旋轉45度,變成加號按鈕,扇形菜單欄以按鈕為中心收起。

      二、實現步驟

      1. 準備階段

      1. 首先拖入一個375*667的動態面板。雙擊動態面板進入state 1頁面。
      2. 在state 1頁面,準備一張375*667的背景圖,放在x=0,y=0的位置。
      3. 然后拖入一個圓,取消邊框,設置尺寸為56*56,填充如下圖所示的玫紅色(這個顏色大家看自己的喜好來填充啦~)。拖入一個加號icon,設置尺寸為22*22,填充白色,放置在圓的正中心位置。組合加號icon和背景圓,作為加號按鈕。
      4. 再次拖入一個圓,取消邊框,設置尺寸為325*325,填充跟第二步中背景圓一樣的玫紅色。將其中心對準加號按鈕,放置在如下圖所示的位置。拖入三個菜單icon,組合菜單icon,放置在菜單欄(大圓)上面的合適位置,然后將菜單欄(圓)和菜單icon一起設為隱藏(加號按鈕置頂)。
      5. 最后,如下圖所示:準備好所需元件后,拖入一個熱區使其完全恰好覆蓋加號按鈕。

      Axure:APP懸浮菜單的動態導航

      2. 設置交互

      (1)首先設置覆蓋在加號按鈕上面的熱區的交互,如下圖所示:

      Axure:APP懸浮菜單的動態導航

      按鈕背景圓的選中交互:

      Axure:APP懸浮菜單的動態導航

      Axure:APP懸浮菜單的動態導航

      (2)然后是對加號按鈕設置交互事件

      Axure:APP懸浮菜單的動態導航

      (3)菜單欄交互

      本文為@運營喵原創,運營喵專欄作者。

      (0)
      運營喵運營喵官方
      上一篇 2018-09-06 15:05
      下一篇 2018-09-09 12:56

      發表回復

      登錄后才能評論
      公眾號
      公眾號
      返回頂部
      運營喵VIP會員,暢學全部課程,點擊查看 >
      <bdo id="r1ift"></bdo>
    2. <bdo id="r1ift"></bdo>

      1. <tbody id="r1ift"><span id="r1ift"><address id="r1ift"></address></span></tbody>
        <nobr id="r1ift"><optgroup id="r1ift"></optgroup></nobr>

        <track id="r1ift"></track>
        轻点灬大ji巴太粗太长了