Axure RP設計圖片翻牌、幻燈片、走馬燈的方法

2021-01-22 人人都是產品經理

以下介紹幾個常用小教程，還是那句話——內容簡單，適合菜鳥查閱，老鳥可飄過，順便幫忙點個讚哈

網頁圖片翻牌效果

例如：滑鼠移到圖片上時，該圖片顯現翻牌效果，顯示另外一張圖片。滑鼠移開，恢復原圖

1.拖動1個圖形元件，右鍵設置「轉換為動態面板「，雙擊動態模板，添加「State2」；

2.對State1，和State2導入圖片，圖片大小要一致；

3.添加滑鼠移入交互動作，並添加動作「設置面板狀態」→「當前元件」→「Next」→{進入動畫}與{退出動畫}均為「向右翻轉」；

4.繼續添加滑鼠移出交互動作，並添加動作「設置面板狀態」→「當前元件」→「Previous」→{進入動畫}與{退出動畫}均為「向右翻轉」；

5.最後把圖片動態面板，複製多幾個，一個個去修改它們的圖片。

網站常見幻燈片

例如：載入網頁，幻燈自動輪轉，點擊幻燈號數，直接跳入該號圖片

1.拖進一個動態面板元件，設置尺寸（根據自己愛好定義），我這裡設置的為寬500，高200，雙擊進入面板狀態管理，設置面板名稱，面板狀態添加5個狀態；

2.針對面板內的5個狀態，每個都拖入圖片，並設置好圖片的尺寸，尺寸與動態面板一致；

3.回到index頁，添加頁面加載時交互方式→添加動作設置面板狀態→選擇動態面板→選擇狀態Next→選擇向後循環、循環間隔2000毫秒、首個狀態延時2000毫秒後切換。設置完成後，可進入頁面測試，查看幻燈圖是否已自動輪轉；

4.添加矩形元件，設置序號、尺寸、樣式，複製到每張動態狀態上；

5.設置矩形的滑鼠點擊交互，添加設置面板狀態動作→選擇序號對應的圖片名稱→添加等待動作→等待時間2000毫秒→添加設置面板狀態動作→設置選擇狀態Next→選擇循環間隔2000毫秒。

網頁常見走馬燈

例如：公司通告、股市數據、購物、博彩等都可使用到

1.拖進一個動態面板元件，設置尺寸和背景色；

2.雙擊動態面板進入面板狀態管理，添加面板名稱，新建一個面板狀態；

3.進入面板狀態state1內，添加文字，文字設置為白色字體，再進入面板狀態state2內，添加文字，文字設置為白色字體；

4.設置交互動作載入時→添加動作設置面板狀態→選擇動態面板→選擇狀態Next→選擇向後循環和循環間隔30000毫秒→進入動畫從左滑動，時間30000毫秒（建議不要設置太快，否則閃瞎眼）

 

本文由 @jukilee 原創發布於人人都是產品經理。未經許可，禁止轉載。

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}

相關焦點

  • 幻燈片的濫觴走馬燈(古代的動畫片)
    正月十五元宵節，有掛花燈的習俗，這走馬燈就是其中的一種。走馬燈一般都是宮燈的形狀，裡面粘貼著一輪帶有圖案的剪紙。點燃裡面的燈燭之後，熱氣會推動紙輪轉起來，燈罩上會出現人馬追逐、物換景移的影像，看上去就像是現在的動畫片一樣。最晚在宋代的時候就出現了走馬燈，當時稱為「馬騎燈」。
  • Axure RP 9 教程:模擬微信系列(2)
    今天給大家送上模擬微信系列第二篇，我們使用簡單的函數組合來達到我們想要的顯示效果，只要懂得其原理，我們就可以使用axure提供的函數做更多的效果。另外，我們展示使用更多的交互來滿足微信消息列表消息的變化效果。
  • Axure教程|淘寶網商品圖片放大鏡效果製作
    今天我們將來展示這個效果，axure製作這個功能並不是很困難，至少比作者之前的小遊戲容易太多了，其中唯一用到的高級功能就是函數，且都是直接使用，沒有複雜的全局變量以及觸發麵板。一、成果展示2.設置的方法十分簡單，如上所示，即讓放大結果成為放大區域坐標的函數就可以了，其中LVAR1這個局部變量指代的就是放大區域。
  • Axure 3D教程:製作3D地圖原型
    編輯導語：很多時候我們會用到3D的效果，今天筆者教大家用axure做一個3D的效果，本文以三維世界地圖為案例，簡單的闡述axure製作3D原型的技巧，我們一起來看一下。一、Axure製作出來的3D效果原型預覽地址：https://7w42g3.axshare.com/#g=1上圖就是axure製作出來的3D地圖的效果，大家可以體驗一下，主要是用圖片+動態面板的效果來實現的，下面開始教學。
  • 如何從幻燈片第3頁開始編號呢?這裡分享兩個方法
    對於把起始編號編得大一點，可以通過 設計→幻燈片大小→自定義幻燈片大小→幻燈片編號起始值，對起始編號進行修改，最大可設置到 9999，哈哈，這完全能滿足需求了。對於從第 3 頁乃至第 4 頁開始進行編號，則不能通過上述方法實現，因為起始編號最小只能設為 0，所以就算是手動把第 1 頁的編號刪掉，也只能從第 2 頁開始編號。
  • 走馬燈是如何實現「燈馬走」的?
    製作「走馬燈」迎新年（圖片：人民網）「走馬燈」是我國的獨特發明，大約在11世紀就有關於它的記載。那麼，什麼是「走馬燈」呢？（圖片：zx.meilele）相傳，王安石23歲時去趕考，途中他發現一戶人家寫在「走馬燈」上的半副對聯非常有趣——「走馬燈，燈馬走，燈熄馬停步。」原來這是馬家小姐為招婿出的上聯，誰能對出下聯就與之結為連理。王安石考完之後火速趕到了回來，幸好那盞「走馬燈」還在，於是就用主考官出的「飛虎旗，旗虎飛，旗卷虎藏身」一聯應對。
  • 走馬燈,是如何實現「燈馬走」的?
    走馬燈（圖片：naic）瞧一瞧，這燈咋就這麼神奇呢？（圖片：zx.meilele）相傳，王安石23歲時去趕考，途中他發現一戶人家寫在「走馬燈」上的半副對聯非常有趣——「走馬燈，燈馬走，燈熄馬停步。」 原來這是馬家小姐為招婿出的上聯，誰能對出下聯就與之結為連理。
  • Axure實現Material Design的按鈕波浪特效
    最近在寫一個谷歌材料設計 Material Design風格的WEB產品，在開發過程中將產品原型做成了本文將以實現谷歌材料設計按鈕的波浪特效為例，提供一種新的自定義Axure元件樣式的方法。需要說明的是：本文所提供的方法已經最大程度小白化，簡單易用，但是對於產品經理來說，本文的教程可能不具有實際的意義，僅提供給喜歡研究Axure Or Code的玩家。
  • 怎麼製作幻燈片
    品牌型號：聯想GeekPro 2020系統：win10 1909 64位企業版軟體版本：WPS Office 2019 11.1.0某些用戶可能具有不同的計算機型號，但是相同的系統版本適用於此方法如何製作幻燈片什麼？1第一步打開ppt演示文稿，單擊頂部菜單中的插入，選擇新幻燈片，然後根據需要插入合適的模板2第二步在水平框中輸入標題，然後單擊頂部的設計選項欄。
  • 七旬老人製作新型走馬燈
    楊家寶和他的新型走馬燈　　臨近元宵節，又到了賞花燈的時候，公園裡、馬路上各種各樣的花燈讓人應接不暇。近日，洛寧縣西山底鄉北村的七旬老人楊家寶經過1個多月的研究，為今年的元宵節製作了一盞與眾不同的走馬燈。
  • 抖音翻牌是什麼梗什麼意思 求翻牌什麼意思
    玩抖音的時候都喜歡邊看邊點讚，還不忘刷一下評論，一般來說評論的精彩程度有時候遠超視頻本身，最近在抖音評論中，就經常看到說求翻牌的話。翻拍這個詞的出處最早是宮廷裡的說法，就是皇上翻嬪妃的牌子。古時皇帝選擇妃子與其同房的一個方法和程序，每個牌子代表一個嬪妃，皇上看中哪個，就將牌子翻過，翻了哪個牌子，皇上就臨幸哪個妃子。有些青樓紅牌姑娘也使用這個方法。
  • Beamer快速入門,製作精美的、高逼格的幻燈片
    其中beamer的功能強大：多種預定義的風格主題、樣式，可供用戶選擇和自定義；版面、顏色、字體可以獨立設計；由於大部分的LaTeX命令和環境可用於beamer，所以非常適合用於數學、物理等學科，且可以實現動態效果；導出的PDF文件，可在多系統平臺使用等。這些優點使得beamer成為最流行的PDF演示文稿製作工具。
  • Axure RP Extension for Chrome離線版下載
    Axure RP Extension for Chrome是原型設計工具Axure RP的Chrome瀏覽器插件。目前版本為0.6.2。因為在線安裝需要訪問Google Chrome在線商店，有時候會訪問不了。所以提供一個離線版本進行安裝。
  • 幻燈片製作教程:新手如何製作幻燈片
    今日，俺就教教你使用office裡面的powerpoint幻燈片軟體（ppt幻燈片軟體）。製作一份屬於自己的幻燈片。製作教程如下：製作幻燈片，當然得準備幻燈片軟體啦，本次俺的幻燈片軟體是現在powerpoint比較高級的版本：powerpoint2010，從幻燈片製作具體對象插入設置到如何製作ppt動畫，powerpoint2010不虧是最高版本的，推薦你們用powerpoint2010哦！
  • 從走馬燈的製作想到辛棄疾的《元夕》
    也講了走馬燈及其它燈飾的製作。深圳有一鄭氏祠堂，又是以村為單位的老年人休閒娛樂場所。元宵節懸掛各色燈籠，寫上各種迷語，猜對的可領氣球之類小獎品。但未見走馬燈。圖片來自網絡走馬燈是將燈籠頂部裝一個象電風扇的螺旋葉片，燈籠內蠟燭燃燒產生的氣流上升，使燈籠旋轉，燈籠上畫上騎馬的將軍，就象漫漫遊走，所以叫走馬燈。走馬燈的形式五花八門多種多樣。還有魚燈和龍燈。
  • 科學小實驗:趣玩走馬燈,探索熱空氣上升的秘密
    點擊上方圖片，查收200+家庭趣味科學小實驗小美：大潘，聽說走馬燈可好玩啦大潘：是的哦，他可是咱們國家的非物質文化遺產呢小美：嗯，昨天看了一檔介紹走馬燈的節目，那些手藝人太厲害啦，就這麼搗鼓一下就讓燈轉了起來。
  • PPT幻燈片頁碼如何設置及頁碼怎麼從0開始
    以下就是PPT幻燈片頁碼如何設置與頁碼怎麼從0開始及怎樣添加總頁數的具體操作實例，實例中所用 PowerPiont 版本為 2019。一、PPT幻燈片頁碼如何設置1、選擇「插入」選項卡，單擊「頁眉和頁腳」，在打開的窗口中，選擇「幻燈片」選項卡，勾選「幻燈片編號」，點擊「全部應用」，則所有幻燈片加上頁碼，操作過程步驟，如圖1所示：
  • 今日應用:用手機製作幻燈片的 5Slides
    5Slides 是一款可以在 iPhone 手機上製作幻燈片的應用。但你也可以用它製作需要文字說明的任何圖片，單張或者一套圖。就像名字裡說得那樣，你只能在一個文檔裡插入最多 5 張幻燈片。在手機上想要為圖片配上文字，或者單純用一組文字表現想法的時候，這是一個不可錯過的應用。首先創建幻燈片進行簡單設置，在這裡如果選擇加入聯繫人信息，就會變成 6 張幻燈片。進入幻燈製作頁面，有兩種現成的模板可選，究竟是要純文字，還是文字配圖片？先做個決定。
  • 數學幻燈片裡對齊的幾個技巧
    一、在幾何畫板裡設置輔助框前面在講描點法畫拋物線的時候，講到了利用幾何畫板作圖，然後複製到幻燈片裡對齊。在那個例子中，對齊是很簡單的，但是類似下面的兩張圖片，要讓三角形對齊就不容易了：解決方法很簡單：在幾何畫板裡畫一個大的矩形框，讓它把所有需要的圖形都包含進去，再把這個矩形的邊框設成白色，邊框端點設為隱藏，然後在複製到畫筆或者幻燈片裡的時候連同矩形一起複製過去就可以了。下圖為了便於讀者觀察，沒有把邊框設成白色。
  • PPT製作:如何正確認識使用幻燈片母版?
    我們在正確的設置幻燈片模板之前， 小編必須要讓大家認識一個叫做幻燈片母版的功能。在幻燈片母版視圖下，我們首先要認識一下左側出現的各個幻燈片頁面。第一張是幻燈片母版，它就是左側最上邊的那張幻燈片，尺寸比其他幻燈片稍大一些，並且與下面的所有幻燈片相連。也就是側面印證了他並不指幻燈片中的某一張，但每一張幻燈片又帶有它的特徵。它是幻燈片母版中最重要的一頁，所有的規範都應放在它身上，這樣其他的頁面都會繼承這樣的規範。