Axure實(shí)現(xiàn)Material Design的按鈕波浪特效

最近在寫(xiě)一個(gè)谷歌材料設(shè)計(jì) Material Design風(fēng)格的WEB產(chǎn)品,在開(kāi)發(fā)過(guò)程中將產(chǎn)品原型做成了Axure元件庫(kù),當(dāng)然目前沒(méi)有完全完成。本文將以實(shí)現(xiàn)谷歌材料設(shè)計(jì)按鈕的波浪特效為例,提供一種新的自定義Axure元件樣式的方法。
需要說(shuō)明的是:本文所提供的方法已經(jīng)最大程度小白化,簡(jiǎn)單易用,但是對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō),本文的教程可能不具有實(shí)際的意義,僅提供給喜歡研究Axure Or Code的玩家。
一、效果預(yù)覽
(1)視頻預(yù)覽
(2)網(wǎng)頁(yè)預(yù)覽
二、實(shí)現(xiàn)原理
(1)波浪效果的實(shí)現(xiàn)需要特定的CSS和JS文件,但是在Axure里我們并不能直接Code。
(2)Axure提供了【當(dāng)前窗口打開(kāi)鏈】的接口,通過(guò)這個(gè)接口可以直接加載Javascript,它提供了Axure和前端代碼直接交互的能力,正因?yàn)檫@樣,Axure在前端樣式和交互上有了更加廣闊的擴(kuò)展空間。
所以我們可以將外部CSS或JS文件放到Javascript中,通過(guò)在【頁(yè)面載入】的時(shí)候,添加用例【當(dāng)前窗口打開(kāi)鏈接】來(lái)加載外部CSS或JS實(shí)現(xiàn)自己想要的樣式或效果:
在打開(kāi)鏈接處JS代碼格式為:
?javascript:需要執(zhí)行的代碼;
三、最終實(shí)現(xiàn)
(1)波浪特效所需要的外部JS和CSS已經(jīng)封裝在代碼中,你只需要將如下代碼添加到:【用例】-【頁(yè)面載入時(shí)】-【打開(kāi)鏈接】-【當(dāng)前窗口】-【鏈接到URL或文件】-【超鏈接】 處。
如果你會(huì)Code可以把JS和CSS文件下載下來(lái)根據(jù)需要實(shí)現(xiàn)不同的效果…
javascript:$(“<link>”).attr({ rel: “stylesheet”,type: “text/css”,href: “https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css”}).appendTo(“head”);
$(“<link>”).attr({ rel: “stylesheet”,type: “text/css”,href: “https://cdn.lylares.com/wave/static/waves.min.css”}).appendTo(“head”);
$.getScript(“https://cdn.lylares.com/wave/static/js/waves.min.js”);
這段代碼通過(guò)Jquery向頁(yè)面引入了兩個(gè)CSS文件和一個(gè)JS文件其中:
$(“<link>”).attr({ rel: “stylesheet”,type: “text/css”,href: “https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css”}).appendTo(“head”);
為預(yù)覽Demo網(wǎng)頁(yè)中所使用的圖標(biāo)字體CSS,在實(shí)際項(xiàng)目中你可以刪掉,只保留第一行的javascript:和第三行及以后的代碼。
第三行及以后的代碼為材料設(shè)計(jì)按鈕波浪效果的核心CSS和JS文件。
這樣就實(shí)現(xiàn)了在Axure生成的HTML文件中自動(dòng)加載外部的JS或CSS文件,接下來(lái)只需要在Axure軟件中進(jìn)行簡(jiǎn)單的按鈕添加或修改設(shè)置即可。
(2)按鈕設(shè)置:如下圖所示,在Axure中請(qǐng)?jiān)谧笊辖窃O(shè)置按鈕的類別:Primary Button和Button。
- Primary Button建議設(shè)置為方形按鈕,圓角不要太大,在方形按鈕下太大的圓角將會(huì)影響波浪效果,這也是目前的一個(gè)不完美的地方,后面應(yīng)該會(huì)改進(jìn)。
- Button建議設(shè)置為圓形按鈕。
如果你是直接在元件庫(kù)中拖動(dòng)的按鈕就無(wú)需設(shè)置,只需要注意兩種Button所對(duì)應(yīng)的圓角樣式。
四、注意事項(xiàng)
文中代碼可能由于轉(zhuǎn)義的原因顯示不全,請(qǐng)以圖片中所示代碼為準(zhǔn),你也可以參考附件的rp文件。
五、原型RP下載
本文由 @?liulin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
厲害,感謝分享!
點(diǎn)擊動(dòng)作都沒(méi) 也不知道你們是怎么學(xué)會(huì)的
如果還需要設(shè)置點(diǎn)擊動(dòng)作,那還加載那個(gè)外部js干什么呢。。。做這個(gè)的初衷就是為了最簡(jiǎn)單化修改按鈕的初始點(diǎn)擊效果。
學(xué)習(xí)了,感謝
厲害了學(xué)習(xí),學(xué)習(xí)。
下載的源文件也沒(méi)有效果啊,點(diǎn)了也沒(méi)反應(yīng)
厲害了我的哥
實(shí)在是在震撼了,原來(lái)Axure還可以做到點(diǎn)呢?。?!
密碼呢
厲害,學(xué)習(xí)一下
為何跟著操作做還沒(méi)有效果?代碼沒(méi)問(wèn)題呀
姿勢(shì)不對(duì)?F5 預(yù)覽不行的,效果只能生成html后才能看到??。
??
多謝分享