Axure教程:如何用Axure實現(xiàn)進棧和遍歷效果

1 評論 1840 瀏覽 6 收藏 6 分鐘

放棄一切錯誤的方法,從今天開始“刻意練習(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 老師,什么時候更新啊

    回復(fù)