• 1.4_5 Axure RP 9 for mac 高保真原型图 - 案例4 【旋转的唱片2】计时器


    相关链接


    案例目标

     1. 了解 计时功能 的实现原理
     2. 熟悉 交互 功能中,情形(case) 的使用场景
     3. 掌握 交互 功能中,使用 载入时 动作卡bug,使程序无限重复运行
     4. 掌握 变量值 实现复杂的计算逻辑

    一、成品效果

    Axure Cloud 案例4 -【旋转的唱片2】计时器

    版本更新

     一、播放
      2.1 点击播放按钮,计时器开始计时
      2.2 点击暂停按钮,计时器暂停计时
      2.3 每次点击播放按钮,继续时间,并等于上次暂停的时间。
     二、计时器
      1.1 播放状态:计时器每秒钟变化一次。
      1.2 播放状态:秒数个位范围[0-9],到10自动进一位,并归0。
      1.3 播放状态:秒数十位范围[0-6],到6自动进一位,并归0。
      1.4 播放状态:分钟个位范围[0-9],到10自动进一位,并归0。
      1.5 播放状态:分钟十位范围[0-6],到6自动进一位,并归0。
      1.6 播放状态:总时间 = 结束时间时,自动暂停
      1.7 暂停状态:计时器停止变化

    在这里插入图片描述

    历史版本Axure Cloud 案例2 -【旋转的唱片】
     一、播放
      1.1 点击播放按钮,唱片开始旋转
      1.2 点击播放按钮,播放按钮变为暂停按钮。
      1.3 点击暂停按钮,唱片停止旋转
      1.4 点击暂停按钮,暂停按钮变为播放按钮。
     二、收藏
      2.1 未收藏状态:点击收藏按钮,出现收藏动效
      2.2 未收藏状态:点击收藏按钮,切换为已收藏状态
      2.3 已收藏状态:点击收藏按钮,出现弹窗,提示取消收藏
      2.4 已收藏状态:点击收藏按钮,切换为未收藏状态

    二、素材准备

      需要先完成:
        案例2 【旋转的唱片】

    三、制作方法

      主要使用到了1.变量2.交互->载入时3.交互->情形(或者叫case)4.逻辑计算

      需要明确的是,当一个元件交互功能中,使用了情形时,最多执行其中一种情形。程序执行与情形的顺序有关。

      例如:下图中的元件s2,使用了【交互-载入时】,【情形-正在暂停、播放结束、s2+1、s2进位】,每种情形中又包含各自的动作。

    在这里插入图片描述
    举例:
      如果【情形-正在暂停】、【情形-播放结束】不满足条件、【情形-s2+1】满足条件:那么会执行【情形-s2+1】中的动作。
      如果同时满足【情形-正在暂停】、【情形-播放结束】:那么只会执行【情形-正在暂停】中的动作,因为程序是按照顺序判断的。
      如果全都不满足:那么不会执行任何动作。

    四、操作步骤(简略介绍)

    4.1 拆分开始时间

      原案例2 【旋转的唱片】中的开始和结束时间,分别使用了两个矩形,内容为00:00和04:29,如果想实现计时功能。则需要将开始时间拆分为5个矩形块。

    在这里插入图片描述

      设五个矩形块分别为ab:cd。并定义四个矩形块的名称分别为m1、m2、s1、s2,方便一会区分。
       m1:表示分钟的第一个数字,即ab:cd中的a,默认值为-1。
       m2:表示分钟的第二个数字,即ab:cd中的b,默认值为-1。
       s1:表示秒钟的第一个数字,即ab:cd中的c,默认值为-1。
       s2:表示秒钟的第二个数字,即ab:cd中的d,默认值为0。

    在这里插入图片描述

    4.2 播放按钮触发计时器

      播放按钮会触发s2的载入时动作。

    在这里插入图片描述

    4.3 计时器配置载入时

      m1、m2、s1、s2都通过 交互->载入时 触发。由于页面打开时就会触发一次载入,所以打开页面后m1、m2、s1中的-1触发了载入时,自身文本+1 [[This.text + 1]] ),-1 + 1 = 0,所以打开页面后,显示为 00:00。

    在这里插入图片描述

    4.4 配置全局变量

      项目->全局变量。

    在这里插入图片描述

      新增两个全局变量current_time -> 表示当前时间(s)、end_time -> 结束时间(4分29秒=269s)。另外 is_playing、is_finish 是在案例2中配置的变量,分别表示是否播放中、是否播放完成0-否、1-是。

    在这里插入图片描述

    4.5 计时器s2

      s2 是计时器的主要逻辑点。添加需要添加四种情形。

    在这里插入图片描述

      情形1:正在暂停。不执行任何操作。目的是让计时器停止计时,不再触发后面的判断逻辑。

    在这里插入图片描述

      情形2:播放结束。触发 动态面板-播放、暂停 面板状态的切换。并且修改相应的变量值。(修改变量值可以让唱片停止旋转)。

    在这里插入图片描述

      情形3:s2+1。即当前文本值小于9时,进行+1处理。等待1000ms(1秒)后触发自身的载入时交互,从而实现循环计数。

    在这里插入图片描述

      情形4:s2进位。即当前文本值等于9时,需要进一位。(① 自身进行归0处理、② s1 -> 触发载入时交互。)、循环计时(等待1000ms后再次触发自身的载入时交互)。

    在这里插入图片描述

    4.6 计时器s1

      只需要分为两种情形,【s1+1】时当前文本+1。【s1进位】时进一位。

    在这里插入图片描述

    4.7 计时器m2

      只需要分为两种情形,【m2+1】时当前文本+1。【m2进位】时进一位。

    在这里插入图片描述

    4.8 计时器m1

      只需要分为两种情形,【m1+1】时当前文本+1。【m1归0】只需要归0即可(因为计时器没有做到小时的功能。

    在这里插入图片描述

    五、bug问题

      快速点击播放、暂停按钮会导致时间流速变快,原因是有2个或者多个载入时动作同时触发,演示时,两次点击间隔大于1秒即可。原型图仅做与展示效果,bug没必要解决。

    在这里插入图片描述


    22/08/24

    M

  • 相关阅读:
    报错__WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor
    Java获取某天、某月或某年的开始结束日期或开始结束时间戳
    学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程(冲哥)|第十五集:中断系统和外部中断
    error: subprocess-exited-with-error完美解决webitor安装不了问题
    算法与数据结构【30天】集训营——线性表的顺序查找、折半(二分)查找、分块查找(14)
    freemarker+yml介绍 以及freemarker与JSP的区别
    怎么把jfif格式改成jpg?
    七天接手react项目 系列 —— react 脚手架创建项目
    ThingsBoard教程(二七):设备批量导入,包含设备id,设备token
    npm install 报错问题解决合集
  • 原文地址:https://blog.csdn.net/qq_43529621/article/details/126506362