本文主要是模拟微信文章的浮窗效果,并分为三个步骤来制作,一起来看看~
背景介绍:微信最近出了一个新的功能:文章浮窗。打开阅读的文章,选择了浮窗效果,就会悬浮在页面上,单击悬浮按钮,会再次打开文章,免去了文章和聊天页面之间来回切换的痛苦。
本次目标:模拟微信文章的浮窗效果。
- 实现 1:点击x符号,文章缩为悬浮按钮;
- 实现 2:点击悬浮按钮,文章重新打开;
- 实现 3:整体效果流畅,相似度90%以上。
适合人群:具有一定Axure基础的产品/交互人员。
学习时间:
- 新手:10~15min
- 一般:8~10min
- 高手:5~8min
- 骨灰:3~5min
页面构成:
事件构成:
步骤1:页面绘制
首先绘制静态的聊天页面和文章页面,具体展示效果如下图所示:
步骤2:文章转浮窗
- 将静态的文章页面转换为动态面板命名为:01_浮窗
- 给动态面板01_浮窗设置两个状态:文章、浮窗
- 文章状态里面存放文章静态页面
- 浮窗状态里面存放悬浮按钮
- 为x符号设置点击事件(参照上图事件设置),具体设置如下:
- 注意缩小时,文章缩小的速度要比外框的快,这样看起来,整个文章缩小的动作才是一个圆角矩形。
步骤3:浮窗转文章
- 首先,单击悬浮窗按钮,切换动态面板状态为文章
- 然后,设置文章的尺寸恢复到原来的尺寸大小375×667
- 恢复外框的尺寸为396×694且在文章完全恢复大小之前,隐藏外框
- 注意外框变大的速度要比文章的速度快,具体设置如下图所示:
最终效果:
本文由 @ 神奈川00 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自 Pexels,基于 CC0 协议