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

发布于 / 教程 / 95 条评论

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


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

视频

网页

波浪效果预览

实现原理

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

axure-material-design
2.按钮设置:
如下图所示,在Axure中请在左上角设置按钮的类别:
Primary ButtonButton
1.Primary Button建议设置为方形按钮,圆角不要太大,在方形按钮下太大的圆角将会影响波浪效果,这也是目前的一个不完美的地方,后面应该会改进。
2.Button建议设置为圆形按钮。
axure-material-design
如果你是直接在元件库中拖动的Button,只需要注意Button的圆角样式。

注意事项

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

温馨提示 :附件解压密码需评论本文后才能查看,评论成功后刷新页面密码自动显示,评论是否成功以邮件通知为准。


转载原创文章请注明,转载自: LYLARES'S BLOG » 自定义Axure的JS和CSS以实现Material Design的波浪特效
  1. avatar

    666 .服了你

  2. 紫宸

    还能有这种操作,象征性打赏表示感谢!

    1. lylares
      @紫宸 感谢打赏!
      1. 紫宸
        @lylares 演示视频已经打不开了
        1. lylares
          @紫宸 视频删除了,效果参考网页版,两者效果是一样的。
  3. avatar

    谢谢

  4. avatar

    大神,啥时候能发密码,试了太多次了。

    1. lylares
      @求大神 刷新文章,在文章底部