回顧：交互三要素事件：交互的觸發器，我們可以理解為“當……”。如，當鼠標單擊某個按鈕，當文本框獲得焦點，等。動作：對事件的響應，即：交互觸發后，發生了什么？如，顯示元件、隱藏元件，打開鏈接頁面，等。用例：動作發生的條件。如，只有注冊表單信息不為空，才打開注冊成功頁面。回顧：交互三要素事件動作用例1動作1動作2用例2動作

Axure動態面板技術型文科人才系列課程主講人：文學與傳媒學院新媒體產品設計與項目管理案例引入第六章Axure動態面板目標（1）知識目標：了解動態面板元件及狀態的概念；理解動態面板元件及其狀態的關系

。（2）能力目標：熟練掌握創建動態面板的方法；熟練掌握動態面板的常用事件和動作；（重點。中階思維和能力）熟練掌握動態面板制作各種復雜的交互效果。（難點。高階思維和能力）（3）素養目標：培養學生提出問題、分析問題、解決問題的能力；（高階思維和能力）培養學生養成知識總結習慣；培養學生表達演示素養。第六章Axure動態面板6.1AxureRP動態面板元件及狀態6.2動態面板的事件和動作6.3利用動態面板實現圖片自動輪播高階思維和能力擴展：（1）分別添加左、右箭頭（icon元件庫中），當點擊向左箭頭圖標時，圖片向右滑動切換上一幅圖；當點擊向右箭頭圖標時，圖片向左滑動切換下一幅圖。（2）在動態面板上，鼠標左滑動時，圖片向左滑動切換下一幅圖；鼠標左滑動時，圖片向右滑動切換上一幅圖。第六章Axure動態面板6.1AxureRP動態面板元件及狀態動態面板有多個狀態每個狀態本身是一個頁面任何時候一個動態面板只能顯示一種狀態第一個狀態為默認狀態通過設置面板狀態來控制狀態的顯示順序或隱藏/達成交互的效果動態面板添加動態面板1.直接通過拖拽的方式從元件面板加入到畫布中2.將頁面中的元件或元件組轉換成動態面板演示：在動態面板狀態1中添加圖片元件，或將圖片轉換成動態面板動態面板狀態管理（1）雙擊頁面中的動態面板元件。進入到動態面板的第1個狀態，在狀態頂部菜單中執行【管理面板狀態】命令。（2）在【概要】面板中,雙擊動態面板元件或者也右擊它,從彈出的快捷菜單中執行【管理面板狀態】命令。可以添加、刪除、上移、下移、復制狀態,或編輯狀態內容等。演示：復制4個狀態，分別添加不同的圖片6.2動態面板的事件和動作動態面板的事件【載入時】剛在網頁中加載動態面板【狀態改變時】指從一個狀態切換到另一個狀態。【拖動時】【拖動開始時】、【拖動結束時】如使用鼠標拖動動態面板完成諸如拼圖的游戲等操作。【向左拖動結束時】、【向右拖動結束時】、【向上拖動結束時】和【向下拖動結束時】如滑屏動作6.2動態面板的事件和動作動態面板的動作1.選擇狀態可以選擇動態面板中的某個狀態【下一項】顯示下一個狀態，還可以指定是否向后循環以及循環的間隔時間等。【上一項】顯示上一個狀態，還可以指定是否向前循環以及循環的間隔時間等。【停止循環】停止動態面板的狀態循環。【值】將狀態名或狀態序列號作為指定的顯示狀態。2.進入和退出動畫可以設置由一個狀態進入另一個狀態時的動畫過渡效果。第六章Axure動態面板事件用例動作動態面板“載入時”

圖片動態面板狀態改變為“狀態2”，動畫：向左滑動動態面板“狀態改變時”圖片動態面板狀態改變為“下一項”，“向后循環”，設置動畫：向左滑動；重復間隔時間。6.3動態面板實現滑動圖片輪播第六章Axure動態面板6.3動態面板實現滑動圖片輪播

演示在圖片下方，添加圓點動態面板；圖片下方小圓點隨著圖片變化同步變化；（狀態變化和時間間隔需要一致）事件用例動作單擊圓點熱區時

圖片動態面板狀態隨之改變第六章Axure動態面板高階思維和能力擴展：（1）分別添加左、右箭頭（icon元件庫中），當點擊向左箭頭圖標時，圖片向右滑動切換上一幅圖；當點擊向右箭頭圖標時，圖片向左滑動切換下一幅圖。（2）在動態面板上，鼠標左滑動結束時，面板向左滑動切換下一幅圖；鼠標右滑動結束時，面板向右滑動切換上一幅圖。事件用例動作圖片動態面板“左滑動結束時”

圖片動態面板狀態變為”下一項”圖片動態面板“右滑動結束時”圖片動態面板狀態變為”上一項”小結動態面板支持在同一個區域內放置多個狀態的內容，選擇顯示其中一個狀態