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

发布于 / 教程 / 126 条评论

最近在写一个全新的谷歌材料设计 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 BLOG » 自定义Axure的JS和CSS以实现Material Design的波浪特效

  1. 还是不错的

  2. 挺喜欢的学习一下

  3. 你的跳转页面不错,希望收到一份源码

    1. @云柯博客 我去。。。你F12不就完事了?
      1. @lylares 我试试,哈哈
      2. @lylares 是不是代码老化了噢
    2. @云柯博客 现在评论是不是没验证码了?
      1. @lylares 对,评论没验证码了,但是你装了插件。刚试了,我能力有限,这个扒不下来
        1. @云柯博客 啥扒不下来?跳转页?不可能的。
          1. @lylares 我扒了,安装不上去,
            1. @云柯博客 很简单的一个单页面跳转,不是插件,只需要在主题fuctions.php配置一下就是,拿去用吧:https://resources.lylares.com/download.php?fn=wp-go-links.rar
              1. @lylares https://www.kvboy.com/wp-content/uploads/2018/07/2018070911045997.png 非常好,看着不错,给你留了版权,哈哈
                1. @云柯博客 图片评论似乎有BUG,尴尬了。。。。
                  1. @lylares
                    1. @云柯博客 确实有点问题了,修复下咯
                    2. @云柯博客 评论贴图没问题,就是回复贴图不行。
      2. @lylares 你这个怎么回复没收到邮件,随缘的吗...........
  4. 优秀

  5. 很强大

  6. 怎么评论才给密码?

  7. 评论了,怎么还看不到密码?

    1. @26359177 首次评论系统会检验是否是垃圾评论,只有通过后,隐藏的密码才会自动显示。都会有邮件通知的。
  8. 看不到密码