Axure教程:如何用Axure實現(xiàn)進棧和遍歷效果
放棄一切錯誤的方法,從今天開始“刻意練習(xí)”,?因為這是最強大的,也是唯一正確的學(xué)習(xí)方法。
—《刻意練習(xí)》
作為一名產(chǎn)品經(jīng)理,每天都要和技術(shù)打交道,技術(shù)知識總是抽象又復(fù)雜的。如何能更好的理解技術(shù)術(shù)語及領(lǐng)域知識是我們要學(xué)習(xí)的。那些技術(shù)們用ppt可以做到的效果,我們用Axure也可以嘗試實現(xiàn)。接下來,我們開始練習(xí)吧
深度遍歷、棧簡介
用Axure實現(xiàn)之前,我們先來學(xué)習(xí)下深度遍歷和棧的知識:
- ?深度遍歷:深度優(yōu)先遍歷 沿著樹的深度遍歷結(jié)點,盡可能深的搜索樹的分支。如果當(dāng)前的節(jié)點所在的邊都被搜索過,就回溯到當(dāng)前節(jié)點所在的那條邊的起始節(jié)點。一直重復(fù)直到進行到發(fā)現(xiàn)源節(jié)點所有可達的節(jié)點為止。
- ?棧:是一種線性存儲結(jié)構(gòu),它具有如下特點:棧中的數(shù)據(jù)元素遵守”后進先出”。限定只能在棧頂進行插入和刪除操作。
前期準(zhǔn)備
- 軟件:Axure 9.0
- 硬件:Windows/Mac電腦
需求分析:
預(yù)期效果
- 深度遍歷:二叉樹節(jié)點從1-10個節(jié)點依次遍歷(閃爍)直到10(最后一個節(jié)點)停止遍歷。
- 棧:數(shù)據(jù)元素A-E依次進棧,最后進棧的元素排在棧頂,最先進入的排在棧底。
教程
1. 深度遍歷
拉取圓形和直線元件組成二叉樹,給每個圓形元件命名并調(diào)整樣式如下:
制作交互效果,讓二叉樹節(jié)點從1-10依次閃爍,完成。
2. 棧
拖動矩形元件,設(shè)置樣式隱藏上邊框可見,如圖:
拖動動態(tài)面板元件命名zhan,右鍵勾選自適應(yīng)內(nèi)容。
雙擊進入動態(tài)面板,添加5種狀態(tài)并命名。
分別設(shè)置每個狀態(tài)內(nèi)元件如下圖(移動參數(shù)根據(jù)棧長度自行調(diào)節(jié))。
A狀態(tài):當(dāng)前A設(shè)置在棧頂位置,通過移動到達棧底,對元件A設(shè)置交互效果。
B狀態(tài):當(dāng)前A已進棧,元件B處在棧頂,頁面載入時通過移動到達元件A上方。
C狀態(tài):當(dāng)前A、B已進棧,元件C處在棧頂,頁面載入時通過移動到達元件B上方。
D狀態(tài):當(dāng)前A、B、C已進棧,D處在棧頂,頁面載入時通過移動到達元件C上方。
E狀態(tài):A、B、C、D已進棧,E處在棧頂,頁面載入時通過移動到達元件D上方。
結(jié)語
以上實現(xiàn)比較簡單,大家還可以想下有沒有其他方法。
當(dāng)我們打算臨摹或者實現(xiàn)某種效果時,實現(xiàn)的方法并非一種,但是實現(xiàn)思路可以概括為以下內(nèi)容:
今天的分享到這里就結(jié)束了,第一次寫文章請多多指教。
本文由 @藍汐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載!
題圖來自Unsplash,基于CC0協(xié)議
老師,什么時候更新啊