继续操作时需要注意微秒、秒和分的计算都是在停止时的计数基础上进行计数的,所以对于“ 1”和归零的操作需要基于停止数来做延迟开始的设置。举例来说,当要从02:44.07的时间点重新开始时间计算时,微秒归零和秒钟 1的时间需要等待(1-0.07)秒的时间;而秒钟归零和分钟 1的时间需要等待(60-44.07)秒的时间。
复位的操作是需要增加一个将微秒、秒、分钟的值手动恢复至0的设置。
对同一对象的单一触发实现不同操作
秒表的页面中间为操作区域,放置两个按钮,秒表未启动时左右按钮分别为“计次”和“启动”,其中“计次”按钮不可用;当开始计时后“计次”按钮可用,同时“启动”按钮变为“停止”;当用户点击“停止”按钮,左侧“计次”按钮变为“复位”,“停止”也重新变为“启动”;用户点击“复位”,回到最初未启动的按钮状态。
当然可以使用四个不同图层进行透明度设置来实现效果。同样也可以仅使用两个文本图层添加对文本内容的判断进行区分。
秒表计次功能及相邻两次计次时间差值计算
秒表中涉及到的计次功能,需要记录当前具体计次的次数,本次计次的时间,以及本次与上次计次的时间差。所以需要新增加三个变量,分别记录计次数、上次计次时间以及两次计次时间差的值。
每次用户点击“计次”按钮后,先将当前时间减去上次计次时间获得两次时间差后,将上次计次时间更新为当前时间,再在计次数上 1(不可改变顺序)。
计次信息的文本显示及查看
由于可以多次计次,每次记录都需要做换行显示,这里涉及一个文本换行 n 用法。
同时多次计时会出现次数显示超出单屏的显示,这时在计次的同时,需要随着计次的增加不断增加文本的显示区域,并利用滚页容器层和滚页反应使其最后一条可以显示出来。
具体实现步骤step1
新建Protopie文件,实现基本视效。
除切换tab之外,界面中操作按钮、秒表数字表达、计次记录显示均使用文本图层。
- 操作按钮默认文本使用“启动”和“计次”,其中计次按钮不可用所以透明度使用26%。
- 秒表的时间数字使用分开的三个文本图层,默认显示为00:00.00。(与时钟案例类似)
- 建立计次标题、具体计次时间和时间变化值的三个空文本图层,图层高度设为单行文本可以显示的高度,并一起放入计次记录的滚页容器层中,使滚页容器支持竖向滚动。
Step2
建立操作按钮之间的关系
根据前面梳理的按钮逻辑对“启动”文本图层添加“点击”触发:
当“启动”的文本为“启动”时,将“启动”文本变为“停止”;将“启动”图层的颜色调整为红色;将“计次”图层透明度变为100%,代表可用状态;同时考虑到暂停后再次启动的情况,将“计次”文本设为“计次”。
当“启动”的文本为“停止”时,将“计次”文本变为“复位”;将“停止”文本变为“启动”;将“启动”图层的颜色重新设为为绿色。
对“计次”文本图层同样添加“点击”触发:
- 当“计次”文本内容为“计次”,同时透明度为100时,计次按钮操作有效,具体反应设置之后再添加。
- 当“计次”文本内容为“复位”时,将“计次”文本重新设为“计次”,并将其透明度设为30%。