界面右侧悬浮可伸缩动态按钮要如何制作?来文中看看便知~
![da12ab1fd3b8c5f4dd7cf6b8cff3ceb5.png](https://i-blog.csdnimg.cn/blog_migrate/dedb0f2bd0c097ef0100ade84e9e3549.jpeg)
1. 页面布局
页面设定:
新建一个页面,命名为【界面右侧悬浮可伸缩动态按钮】,在这个页面下面新建一个叫做【界面1】的子页面,再在【界面1】下面新建两个2子页面,分别命名为【界面1-1】和【界面1-2】。
![ecff34b49c540b425576cce0d99d40d7.png](https://i-blog.csdnimg.cn/blog_migrate/e366c6bad8361310f87951b67f2c9dd6.jpeg)
(1)界面右侧悬浮可伸缩动态按钮
在页面内新建一个【动态面板】。
![9ff30bb0ace44a99ef45da78ced028ea.png](https://i-blog.csdnimg.cn/blog_migrate/5de7d5cd92c87a8cab585bcde7989609.jpeg)
【动态面板】的【State1】内分别从左侧元件库内拉入两个【矩形】做一级背景(大小尺寸为1704*940)和二级背景(大小尺寸为1704*821,上下边框为实体线框,较粗样式,颜色为#06C1FA)。
![b26e48f50b9a3fb5160e55cec4ba2535.png](https://i-blog.csdnimg.cn/blog_migrate/150969870e802432b511473c86945989.jpeg)
![085cb6129d4e603262a59907d1fb6a8f.png](https://i-blog.csdnimg.cn/blog_migrate/96cbed3b259751abe9d1f8fc018eb588.jpeg)
并从左侧元件库内拉入一个内联框架,将其嵌入到二级背景之内,隐藏其边框,框架滚动条设为从不显示,大小尺寸为1704*815,不覆盖二级背景的样式,且内联框架目标页面为【界面1】。
![35b36d2bf6769320eea10cd90abcb5cb.png](https://i-blog.csdnimg.cn/blog_migrate/8ef916f9c6657dd810f9ab8def5b9f2f.jpeg)
![9e8fc13c69870271af5087672d793c5c.png](https://i-blog.csdnimg.cn/blog_migrate/0ac3c34d58e4efceda886247b662de60.jpeg)
(2)界面1
页面内从左侧元件库拉入一个【矩形】元件,作为背景,大小尺寸为1643*760,边框为实体线,色值为#f2f2f2。
![b48c02fc5544869895439d81197aae88.png](https://i-blog.csdnimg.cn/blog_migrate/a22e4d18d60edd9d4ef8e5ac3250533c.jpeg)
从左侧元件库拉入一个【内联框架】元件,将其嵌入到背景之内,隐藏其边框,框架滚动条设为从不显示,大小尺寸为1639*754,不覆盖背景的样式,且内联框架目标页面为【界面1-1】。
![1d6a2426868949536124d1f3078d0d89.png](https://i-blog.csdnimg.cn/blog_migrate/3d6ade9025eea1c087653803a5879e9e.jpeg)
![90dd1f6c01bf1462c2376f6773fcb31c.png](https://i-blog.csdnimg.cn/blog_migrate/3f3890b07f3f109b50ed0a8a3e922fad.jpeg)
新建两个【动态面板】,分别命名为【界面1-1】和【界面1-2】,在两个动态面板内分别新建两个相同命名的文件组合,然后分别从左侧元件库内拉入一个【矩形】做背景,一个【文件标签】,一个【椭圆形】,以及在【椭圆形】内嵌入图标,设定成按钮的样式。
![5f2b6b19ab567b624cc97e02c282e9a6.png](https://i-blog.csdnimg.cn/blog_migrate/7b05642b8f9fd916c535c4b3b1d272d1.jpeg)
(3)界面1-1&界面1-2
从左侧元件库拉入一个【一级标题】元件,内容改为界面1-1;从左侧元件库拉入一个【一级标题】元件,内容改为界面1-2。
2. 动态交互
2.1 效果设计
(1)实现右侧悬浮按钮的悬停、按下、选中的动态效果
选中【背景】,进行其【交互样式设置】,将鼠标悬停交互样式填充颜色设置为#ff0000、透明度为80%,鼠标按下交互样式填充颜色设置为#ff0000、线段颜色为#ff9900、选中交互样式填充颜色设置为#ff0000、线段颜色为#ff9900。
![6e97ec2ece6216b7f930089fac73a6ec.png](https://i-blog.csdnimg.cn/blog_migrate/a1a402475f2c925e3703df76a7b91cde.jpeg)
![e33f83d5226fb73321c5cbd51cb8f724.png](https://i-blog.csdnimg.cn/blog_migrate/647c66ee8658f45e3e8249d80e4fde55.jpeg)
(2)实现右侧悬浮按钮的伸缩动态效果
选中界面1-1或者界面1-2【动态面板】内的文件组合,点击添加交互中的【鼠标移入时】&【鼠标移出时】用例,匹配值相关动作。
![537e3aab71288ee20dbfd9a8cd8b1788.png](https://i-blog.csdnimg.cn/blog_migrate/a6a8f5883860aa3429ad22092f405ec8.jpeg)
步骤一:设置右侧悬浮按钮交互【鼠标移入时】用例
在case1【组织动作】中添加【移动】动作,在【配置动作】内够远界面1-1【文件组合】,【移动】状态选择【到达】,x=0、y=y,【动画】效果选择【弹性】时间t=1000毫秒。
![f7f615456dc024490fbfb6e98e91cec5.png](https://i-blog.csdnimg.cn/blog_migrate/008f2d6e8e34c0186db4fa9eb7066081.jpeg)
步骤二:设置右侧悬浮按钮交互【鼠标移出时】用例
在case1【组织动作】中添加【移动】动作,在【配置动作】内勾选界面1-1【文件组合】,【移动】状态选择【到达】,x=70、y=y,【动画】效果选择【弹性】时间t=1200毫秒。
![5558af990a396ead3c26a8bcd924fea1.png](https://i-blog.csdnimg.cn/blog_migrate/9f516117fa5b2cc4c5e21aa48dd82641.jpeg)
2.2 交互流程
(1)实现右侧悬浮按钮与内联框架的交互操作效果
选中【文字】元件,点击【添加用例】中的【鼠标单击时】用例,配置相关的动作。
![1c3d9f69337f7c237dd7a56af9f73edc.png](https://i-blog.csdnimg.cn/blog_migrate/a6ca6173792da20ad12bbc9aa8d53bcd.jpeg)
步骤一:设置右侧悬浮按钮触发之后状态的改变设置
在case1【组织动作】中添加【选中】动作,在【配置动作】内勾选界面1-1和界面1-2【文件组合】内的【椭圆形】和【背景】元件,界面1-1内的【椭圆形】和【背景】勾选之后,设置选中状态的值=true,界面1-2内的【椭圆形】和【背景】勾选之后,设置选中状态的值=false。
![2ddfde67b75871866100725e36d05a6e.png](https://i-blog.csdnimg.cn/blog_migrate/b588444036001e30a4bfe1da7e687edb.jpeg)
步骤二:设置右侧悬浮按钮触发之后内联框架的交互设置
在case1【组织动作】中添加【选中】动作,在【配置动作】内勾选【内联框架】,在【打开位置】勾选【链接到当前项目的某个页面】,并选择【界面1-1】页面,配置【内联框架】链接界面1-2与以上同理。
![87c002fe67879b97afc44f7e09619c36.png](https://i-blog.csdnimg.cn/blog_migrate/487e0eba7d4d1968f1c071fad06212b4.jpeg)
3. 预览效果
![c9b9cc70dbcbde2f4775516ca9c9bcfd.png](https://i-blog.csdnimg.cn/blog_migrate/557308f15c0b3d1a2b8c36a22aad344c.jpeg)
![99b9739fa3d844b10ea1a35851f480f6.png](https://i-blog.csdnimg.cn/blog_migrate/d3fc49d94d5f5a5136ed3a3962b6a572.jpeg)
![e91cf0e047959d1ef6fdc4496830fc55.png](https://i-blog.csdnimg.cn/blog_migrate/041a0084af01c0e94ef3ee5e3b259e0a.jpeg)
4. 结语
结语:请路过的朋友们多多支持哈,卧枕江山在这里先谢谢了,以后会有更多优质的文章和产品在这个平台上进行发布,请尽请期待呦
本文由 @卧枕江山 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议