自定义Axure的JS和CSS以实现Material Design的波浪特效

最近在写一个全新的谷歌材料设计 Material Design风格的WEB产品，在开发过程中将产品原型做成了Axure元件库，当然目前没有完全完成。本文将以实现谷歌材料设计按钮的波浪效果为例，提供一种新的自定义Axure的样式的方法

需要说明的是，本文所提供的方式已经最大程度小白式，简单易用，但是对于产品经理来说，本文的教程可能不具有实际的意义，仅提供给喜欢研究Axure Or Code的玩家。

视频

网页

波浪效果预览

实现原理

1.波浪效果的实现需要特定的CSS和JS文件，但是在Axure里我们并不能直接Code
2.Axure提供了当前窗口打开链接的接口，通过这个接口可以直接加载Javascript,它提供了Axure和前端代码直接交互的能力，正因为这样Axure在前端样式和交互上有了更加广阔的扩展空间，所以我们可以将外部CSS或JS文件放到Javascript中，通过在页面载入的时候添加用例:当前窗口打开链接来加载外部CSS或JS：


在打开链接处JS代码格式为：
javascript:需要执行的代码;

最终实现

1.首先，你需要将如下代码添加到：用例-页面载入时-打开链接-当前窗口-链接到URL或文件-超链接 处。
如果你会Code可以自己修改加载的JS和CSS来修改效果…
其中$("").attr({ rel: "stylesheet",type: "text/css",href: "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"}).appendTo("head");为预览Demo网页中使用的CSS，你可以删掉。

 javascript:$("\").attr({ rel: "stylesheet",type: "text/css",href: "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"}).appendTo("head");
$("").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");

2.按钮设置：
如下图所示，在Axure中请在左上角设置按钮的类别：
Primary Button和Button
1.Primary Button建议设置为方形按钮，圆角不要太大，在方形按钮下太大的圆角将会影响波浪效果，这也是目前的一个不完美的地方，后面应该会改进。
2.Button建议设置为圆形按钮。

如果你是直接在元件库中拖动的Button,只需要注意Button的圆角样式。

注意事项

文中代码可能由于转义的原因显示不全，请以图片中所示代码为准，原始代码也可以参考附件的rp文件。

定制开发

接受各种定制开发，微信咨询:

前往查看

赞助支持