Axure RP這款軟件的強大眾所周知撤缴,筆者也處于探索期間。
特意將自己學(xué)習(xí)的過程記錄下來令蛉,以便鞏固聚霜。如果有初學(xué)者需要更是利己利人狡恬。
下面直接進入主題。
1.分析
分析需要輪播的圖片數(shù)量蝎宇,這里拿3張輪播圖片來舉例弟劲。分析完畢后來到“線框圖”中找到“動態(tài)面板”選項,拖動動態(tài)面板到編輯區(qū)姥芥,并設(shè)置好動態(tài)面板的尺寸大小兔乞,和輪播的圖片一致。
2.雙擊你拖出的動態(tài)面板凉唐,進入“動態(tài)面板狀態(tài)管理”頁面庸追,點擊“+”添加子集,子集的數(shù)量和你需要輪播的數(shù)量一致(這里需要提到的是台囱,在新建動態(tài)面板和添加子集的時候最好為它們命名淡溯,這樣方便后期的管理和編輯,這點真的很重要)
3.放入圖片簿训,在右下角“部件管理”中咱娶,雙擊你添加的子集,將圖片放入子集對應(yīng)的面板框中煎楣。(如果你添加了圖片發(fā)現(xiàn)下面沒顯示豺总,那么檢查一下Widget Filter這個選項下是不是選的“所有部件”)
4.回到首頁界面,你會發(fā)現(xiàn)你添加的圖片的第一張已經(jīng)顯示在動態(tài)面板中了择懂。然后選中動態(tài)面板喻喳,在右側(cè)“部件交互和注釋”中雙擊“載入時”用例進入用例編輯器
5.在用例編輯器中先選擇“雜項”-“等待”輸入等待毫秒數(shù),這里用系統(tǒng)默認(rèn)的1000毫秒困曙。這么做的原因是防止輪播圖在載入時就開始輪播表伦,而導(dǎo)致第一張圖片的顯示效果不好,造成的用戶體驗不佳慷丽。然后選擇“動態(tài)面板”選項下的“設(shè)置動態(tài)面板”選項蹦哼,在“配置動作”中勾選剛剛我們設(shè)置的輪播圖動態(tài)面板,選擇狀態(tài)選擇“下一步”要糊,勾選上“從最后一個到第一個自動跳轉(zhuǎn)”實現(xiàn)無限輪播效果纲熏,勾選上“repeat every”并設(shè)定數(shù)值,這個選項設(shè)定的數(shù)值就是一張圖片到下一張圖片之間的等待時間锄俄。為了讓過渡更加平滑局劲,所以進入、退出動畫都選擇向左滑動奶赠,這個根據(jù)自己的需求決定鱼填。設(shè)置完畢后點擊確定退出用例編輯器。另外需要提到的一點就是用例執(zhí)行的順序是由上到下的毅戈,所以“等待”用例需要在第一位才可以苹丸。
6.此時可以按F5預(yù)覽一下效果愤惰,可以發(fā)現(xiàn)圖片已經(jīng)可以開始輪播了,但是還是缺少一部分東西赘理。因為我們在網(wǎng)頁中看到的輪播圖效果宦言,下面對應(yīng)的點。這個輪播圖圓點的制作方式完全和我們上面制作的過程一樣感憾,用例的添加也是一樣的蜡励。
這里我是之間選擇“線框圖”中的矩形令花,換成了愛心阻桅。并填充了顏色以對應(yīng)輪播的圖片
這里的輪播圖圓點的動態(tài)面板的用例我將動畫修改為了“淡入淡出”,當(dāng)然用向右滑動也是可以的兼都,看個人需求
7.這個簡單的輪播效果到這里就完成了嫂沉,希望對初學(xué)者有所幫助。如果有人喜歡的話扮碧,我以后會多發(fā)些簡單的教程上來趟章,簡書新開,希望和大家多多交流慎王。