还原知乎导航抽拉效果-单击选中再点击出现抽屉 获赏10金币 案例教程 基础教程

suxiaobao 普通用户 2020-2-27 1393

这两天看到知乎的导航栏的抽屉效果眼前一亮,不但满足需求实现起来很容易,小设计又感觉挺特别。我见的设计太少了??反正个人觉得挺好的,抽空做出来和大家分享一下吧


首先看下效果图吧

它是选按钮式有下划线一直跟着动的效果,选中“关注”按钮后再次点击会出现抽屉效果,再次点击合上。


现在开始分享步骤:

1.我们只需关注导航栏的按钮+下拉菜单就好啦,所以需要的元件是4个按钮矩形+对应的下划线+下拉菜单矩形和下拉菜单上的四个矩形按钮,我把按钮和对应的下划线设计成了组合,下拉菜单也设计成了组合,这样方便抽拉的时候的交互

因为主要说“关注”按钮的抽拉,所以只把这个按钮转成了动态面板,其他按钮单击时添加交互就可以实现效果。

动态面板在State1下的元件为


2.首先来实现点击按钮下划线随着动的效果。在添加下划线元件的时候先把下划线设置成隐藏状态,给一个按钮添加交互,单击时显示对应的下划线,其他的下划线隐藏掉。然后把效果粘贴给其他按钮的交互,粘贴式修改要显示的下划线

效果实现


3.实现抽拉效果。双击动态面板进入State1,添加下拉组合后设置为吟唱状态。在关注上面添加同等大小的热区。给热区添加交互,单击时出现下拉组合灯箱效果

然后给下拉组合添加交互,显示时顺时针旋转下三角,隐藏时逆时针旋转下三角

最后给下拉组合里的按钮添加交互,单击时隐藏下拉组合


到这里就全部结束了!!


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (22)
  • lxy1120 普通用户 7月前
    0 引用 23
    感谢感谢
  • adrian123456 普通用户 8月前
    0 引用 22
    感谢分享
  • 123456ZZZ 普通用户 9月前
    0 引用 21
    -
  • yyf140522 普通用户 9月前
    0 引用 20
    感谢分享
  • 一月 普通用户 9月前
    0 引用 19
    666
  • Dr.Fish 普通用户 11月前
    0 引用 18
    感谢楼主大大
  • chenyujie1949 普通用户 11月前
    0 引用 17
    谢谢分享
  • 一无所有就是拼的理由 普通用户 11月前
    0 引用 16
  • Victor Guo 普通用户 11月前
    0 引用 15

    谢谢分享

  • Victor Guo 普通用户 11月前
    0 引用 14
    谢谢分享
  • 黑又浓 普通用户 11月前
    0 引用 13
    谢谢
  • Burger_BIN 普通用户 11月前
    0 引用 12
    感谢
  • 纳洛酮。 普通用户 11月前
    0 引用 11
    66
  • 悟空_1589853708 普通用户 11月前
    0 引用 10
    感谢
  • Lemin.focus 普通用户 2020-5-6
    0 引用 9
    做这个要多久啊
  • 狼人团-果果 普通用户 2020-3-16
    0 引用 8
    感谢分享
  • Allen李 普通用户 2020-3-12
    0 引用 7
    666
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 6
    感谢分享
  • Lynnea 普通用户 2020-3-5
    0 引用 5
    感谢分享
  • 不错 普通用户 2020-2-29
    0 引用 4
    666
  • 单单 普通用户 2020-2-28
    0 引用 3
    感谢
  • 井建 普通用户 2020-2-27
    0 引用 2
    感谢分享
返回
发新帖
AxureShop
axure商城