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

发布于 / 教程 / 60 条评论

最近在写一个全新的谷歌材料设计 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

    楼主能留个微信吗,想拜师学习一下.

    1. avatar
      @时间领主 可以邮件我。。。
      1. avatar
        @lylares axure 8.1.0.3377 发布HTML后, 点击按钮没有特效了...
        1. avatar
          @时间领主 附件中的rp生成的html没效果?发布前测试过没问题的呀。。
          1. avatar
            @lylares 是的 ,没效果..... 我也不知道是怎么回事
            1. avatar
              @时间领主 换个浏览器试试。。
  2. avatar

    想要学习一下,谢谢了.

  3. avatar

    想要学习

  4. avatar

    真的很棒

  5. avatar

    不错

  6. avatar

    学习

  7. avatar

    真的很强大,我想要密码o(╥﹏╥)o

    1. avatar
      @hala LSN 不必要多次评论的,留下一个脚印就好,可能你觉得评论不够精彩通不过,那你就错了。。🌝。^_^
  8. avatar

    厉害了

  9. avatar

    学习了

  10. avatar

    效果好棒,学习了

  11. avatar

    效果好棒,学习了~

  12. avatar

    这个厉害了

  13. avatar

    交互体验设计很棒

  14. avatar

    厉害

  15. avatar

    很不错

  16. avatar

    这个厉害了

  17. avatar

    看看

  18. avatar

    为什么删掉我的评论,求密码

  19. avatar

    谢谢分享,学习下高大上的展示方式~~

    1. avatar
      @从零到一 解压密码没看到哎
  20. avatar

    对如此绚丽的的交互必须学习一下。

  21. avatar

    挺好的

  22. avatar

    谢谢分享。刚开始学习,学习学习!

  23. avatar

    还是不错的

  24. avatar

    挺喜欢的学习一下

  25. avatar

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

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

    优秀

  27. avatar

    很强大

  28. avatar

    怎么评论才给密码?

  29. avatar

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

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

    看不到密码

  31. avatar

    很好,值得学习,给我密码啊

  32. avatar

    解压密码

  33. avatar

    好像没有发我解压密码啊

  34. avatar

    还是比较威武的啊

  35. avatar

    解压密码是多少呢?

  36. avatar

    解压密码是啥

  37. avatar

    解压密码呢

  38. avatar

    厉害