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

suxiaobao 普通用户 2020-2-27 2711

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


首先看下效果图吧

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


现在开始分享步骤:

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

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

动态面板在State1下的元件为


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

效果实现


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

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

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


到这里就全部结束了!!


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (0)
返回
发新帖
AxureShop
AxureShop
AxureShop