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

发布于 / 教程 / 94 条评论

最近在写一个全新的谷歌材料设计 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 演示视频已经打不开了
        1. avatar
          @紫宸 视频删除了,效果参考网页版,两者效果是一样的。
  2. avatar

    谢谢

  3. avatar

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

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

    求密码,求密码,求密码

  5. avatar

    大神膜拜一下,顺便要一下密码,佩服佩服

  6. avatar

    大神膜拜一下,顺便要一下密码

  7. avatar

    谢谢分享

  8. avatar

    求密码。

  9. avatar

    学习一下

  10. avatar

    加油

  11. avatar

    正好在做原型,学习下这个

  12. avatar

    东西不错

  13. avatar

    很不错

  14. avatar

    学习了,原来通过引用js也可以丰富AXURE的交互效果

  15. avatar

    学习学习

  16. avatar

    一大堆复制粘贴的评论,我也是醉了。。。
    看垃圾评论太累了,以后评论完全交给后台去处理,评论没通过是看不到密码的。

  17. avatar

    评论完了之后密码在哪

  18. avatar

    评论完了之后密码在哪

  19. avatar

    学习了

  20. avatar

    求个密码吧大神

  21. avatar

    很棒很棒,求个密码

  22. avatar

    邮件要等多久才会通知啊,感觉等了一个世纪。。。

  23. avatar

    谢谢分享超厉害

  24. avatar

    求密码!

  25. avatar

    怎么样才能看到密码,感觉效果很棒

  26. avatar

    想要学习一下,谢谢了.

  27. avatar

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

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

    想要学习一下,谢谢了.

  29. avatar

    求密码

  30. avatar

    没设成功,求密码:)

    1. avatar
      @tran 被后台识别为垃圾评论鸟
  31. avatar

    想要学习

  32. avatar

    真的很棒

  33. avatar

    真的很棒

  34. avatar

    不错

  35. avatar

    学习

  36. avatar

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

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

    厉害了

  38. avatar

    学习了

  39. avatar

    效果好棒,学习了

  40. avatar

    效果好棒,学习了~

  41. avatar

    这个厉害了

  42. avatar

    交互体验设计很棒

  43. avatar

    厉害

  44. avatar

    很不错

  45. avatar

    这个厉害了

  46. avatar

    看看

  47. avatar

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

  48. avatar

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

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

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

  50. avatar

    挺好的

  51. avatar

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

  52. avatar

    还是不错的

  53. avatar

    挺喜欢的学习一下

  54. 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 你这个怎么回复没收到邮件,随缘的吗...........
  55. avatar

    优秀

  56. avatar

    很强大

  57. avatar

    怎么评论才给密码?

  58. avatar

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

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

    看不到密码

  60. avatar

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

  61. avatar

    解压密码

  62. avatar

    好像没有发我解压密码啊

  63. avatar

    还是比较威武的啊

  64. avatar

    解压密码是多少呢?

  65. avatar

    解压密码是啥

  66. avatar

    解压密码呢

  67. avatar

    厉害