发布时间：2021-1-11 分类： 行业资讯
滑动条，进度条和进度环是产品原型中更常见的进度显示功能。我今天分享的是使用Axure Prototyping Tool来实现两个进度显示功能之间相对复杂的交互。
效果一：可拖动，显示进度值，滑动进度条，可以计算多个页面平均值
达到效果
功能过程分析
因为它涉及从多个页面传输值，我们使用Axure中的[全局变量]函数来临时存储每个进度条的值，以便最后一步是获取五个进度值并计算它们再次。
预生产分析
页面：5个进度页面，1个结果显示页面;
拖动方向：可以来回拖动进度;
主要组件（列出组件也可以提前命名）：进度底部评估盖点，进度按钮评估选项，进度值得分，下一个，全局变量评估分数，最终得分评估分数;
计算逻辑1：进度值范围=从左到右为0-100点;
计算逻辑2：进度值=（进度按钮的水平位置和除法;进度底部插槽的横向宽度）* 100;
计算逻辑3：最终得分=5个进度值的平均值;
具体实施方法
1.新页面
只需单击页面区域中的新页面按钮，然后单击6次即可构建6页。
2，制作进度条组件
1 [Progress bottom slot EvaluationGap]
在Page1页面中，拖动< 2 rectangle"在组件库中编辑区域的左上角，设置宽度350 *高度20，并将其命名为Evalu01Gap：
2 [进度按钮评估选择]
将组件库中的“椭圆”拖动到编辑区域的左上角，设置宽度20 *高度20，并将其命名为Evalu01Select以设置颜色并将其与底部插槽区分开来：
3 [进度值得分]
4转换为动态面板
选择所有三个组件右键单击，单击“转换为动态面板”选项，这三个组件将一起生成为“动态面板”::
生成“动态面板&quoquo;目的：在动态面板中，您可以在组件移动时设置“水平拖动”效果。
3.设置进度条拖动事件
1在动态面板属性区域中双击[拖动]，转到< Drag>使用案例编辑页面，然后单击左侧的[移动]：
2选择[进度按钮评估选择]，在右下方移动选项中选择“ld水平拖动”，添加2个左右边框，并设置点以确定：
完成此步骤后，您可以预览效果：左右拖动效果已完成，拖动范围仅在进度槽中。
4，设置进度条拖动值
1 [进度值分数]默认值为“三级标题”，我们将双击它并将其更改为“0”。
2双击动态面板“ldquo;当拖动-Case1”输入< Drag>再次使用案例编辑页面，单击左侧的[设置文本]，选中[Score01]，单击右下角的[fx]按钮：
3个新打开的窗口，即编辑功能的窗口，我们先按照下图添加2个局部变量：
变量1（LVAR1）是“进度按钮”，变量2（LVAR2）是“进度底部插槽”：
4将变量放入函数中：
记住我们的预生产分析的“计算逻辑2”：
计算逻辑2：
进度值=（进度按钮的水平位置和除法;进度底部插槽的水平宽度）* 100
用Axure编写的函数表达式是：
进度按钮的水平位置：LVAR1.x
进度底部插槽的水平宽度：LVAR2.width
进度值=[[math.ceil（100 *（LVAR1.x）/（LVAR2.width-20））]]
注意：由于进度按钮的直径为20，[进度底部插槽的横向宽度]减少了20，因此操作可以使[进度按钮]到最右边，[进度值]是完全是100.
设置后，您可以预览此时的效果：左右拖动效果完成，拖动显示进度值。
5.将[将进度条拖动时的值]分配给[全局变量]
1单击[Project→全局变量]，添加一个全局变量，将其命名为Evalu01Score，OK：
2双击动态面板“ldquo;当拖动-Case1”输入< Drag>再次使用案例编辑页面，单击左侧的[设置变量值]，检查全局变量[Evalu01Score]，并将值设置为进度值[Score01]]同样如下：
6，将Page1的操作复制到剩余的4页
略
7，设置最终得分EvaluateScore
1在第6页中，拖动“矩形2”。在组件库中进入编辑区并将其命名为EvaluateScore：
2点击“底角Page6→当页面加载时“rdquo;进入用例编辑页面，单击左侧的[设置文本]，选中矩形[EvaluateScore]，单击右下角的[fx]按钮：
3在功能编辑框中，输入[5个进度值的平均值]的功能：
[[Math.ceil（Evalu01Score + Evalu02Score + Evalu03Score + Evalu04Score + Evalu05Score）/5]]
8，设置页面之间的跳转
1在Page1页面放置一个矩形，然后将文本编辑为“下一步”：
2点击“ldquo;下一步”矩形>当鼠标点击“rdquo;进入用例编辑页面，单击左侧的[Open Link]，选择Page2：
以同样的方式，使Page1-Page5的每一页都添加[Next]。设置完成后，您可以预览此时的效果：
“可拖动，可显示的进度值，滑动进度条功能，可以计算多个页面的平均值 基本实施。唯一剩下的就是我们需要添加其他内容组件并设置一些美化效果。
效果2：可以倒计时，暂停和暂停的进度循环。
达到效果
功能过程分析
预生产分析
页面：1显示页面;
拖动方向：进度循环旋转;
主要组件（列出组件也可提前命名）：进度底部插槽，盖板盖左侧和盖板右侧，进度条左右，倒计时时间倒计时，暂停暂停，继续播放;
倒计时逻辑：
1倒计时范围=从10秒到0秒;
2倒计时速度=1s=1000ms;
3自动倒计时实现：通过动态面板[循环设置];
4倒计时数=10秒 - 旋转时间=10-（旋转角度/360°）* 10
进度循环逻辑：
1个进度底部插槽，左盖板条盖左侧，右侧盖板条右侧，左侧进度条左侧，右侧进度条右侧，分级顺序：
2倒计时未开始时：白色[左右盖板条]分别覆盖紫色[左右进度条]，此时页面没有进度条显示;
3倒计时开始：[左进度条]顺时针旋转，紫色进度条缓慢出现，直到右侧180度完全出现; [右侧进度条]顺时针旋转（[左盖板消失]），直到它完全旋转180度;
每秒4个进度循环旋转角度=360°;除以10秒=36°/s。即：如果预设每250毫秒旋转一次，那么这个较低运动的角度应为9°。
暂停和恢复的逻辑：
1单击[暂停]：倒计时停止，暂停按钮隐藏，恢复播放按钮出现;
2单击[继续播放]：倒计时开始，隐藏播放按钮，并显示暂停按钮;
具体实施方法
1.创建新页面并制作每个组件
注意：[Dynamic Panel DoingLoop]和[Start Go] 2组件设置为“隐藏”
戒指制作方法：重叠后放置2轮，全选，点击“排除”按钮：
半环制作方法：将矩形和半环放置在重叠位置后，选择所有点，然后单击“删除”按钮：
以同样的方式，您可以制作暂停按钮和播放按钮的形状。
2.动态面板的[循环设置]
1设置自动旋转的时间（动态面板设置[显示时]交互式）
设置[动态面板状态]→检查Dynamic Panel→下一个/后向循环/250ms：
2设置自动旋转的角度（动态面板设置[当状态改变时]交互）
首先设置[左进度条]向右旋转的条件（[左进度条]旋转角度< 180°）：
如果“[[LVAR1.rotation]]” < “ 180”的
在这种情况下，继续设置[方向/旋转角度]：
根据先前的预先计算：每个周期为250毫秒，即每250毫秒，该较低运动的角度为9度。
3设置自动倒计时的数量（动态面板设置[当状态改变时]交互）
在if [ldquo; [[LVAR1.rotation]]”的条件下，通过[Set Text]动作继续设置[Real Time Countdown Number]。 < “ 180”的：
请记住我们的预生产分析的“倒计时逻辑”：
实时倒计时数=10秒 - 旋转时间=10-（旋转角度/360°）* 10
写成函数表达式是：
实时倒计时数=[[Math.ceil（10-10 *（LVAR1.rotation + LVAR2.rotation）/360）]]
4与上述相同，设置[右进度条]旋转
如果&ndquo; [[LVAR2.rotation]]”添加新的用例< “ 180”的，在这种情况下，设置隐藏的[左盖]，[旋转方向/角度]，[实时倒计时数]：p>
5最后在旋转完成后设置情况
添加新用例Else If Ture，将动态面板状态设置为停止循环并隐藏动态面板：
让我们总结一下[Dynamic Panel DoingLoop]处理的逻辑（如下所示）：
显示[Dynamic Panel DoingLoop]时
↓
[显示]交互设置生效
↓
我开始了Next loop→所以我自己的州改变了
↓
[状态更改时]交互设置生效
↓
用例1开始→进度条开始出现在右边→进度条完全显示在右侧
↓
用例4开始→进度条开始出现在左侧→进度条完全显示在左侧
↓
用例2开始→ [Dynamic Panel DoingLoop]停止循环
注意：用例的执行顺序在[用例顺序]的顶部执行，与用例名称编号无关。例如：[用例4]在[用例2]之上，将首先执行[用例4]。用例可以通过鼠标直接拖动。
3，暂停按钮，继续播放按钮的交互设置
4，开始倒计时
因为倒计时“250毫秒转向”是基于[动态面板制作行动]在[显示]设置“下一步”循环下来，我们开始倒计时是启动[动态面板制作行动]显示：
当我们在步骤1中创建每个组件时，我们将[Dynamic Panel DoingLoop]设置为[Hide]，因此只需为整个页面设置[Page Loading]的交互事件，并让动态面板为[hidden]→ [显示]，即使启动成功。
此时，设置全部完成，预览〜
