小 楼 axure 图 文 教 程 ( 十 七 ) 倒 计 时 效 果 -脑 图 、局 部 变 量 、循 环 以 及 函 数 的 使 用 作 者 : 小 楼 一 夜 听 春 语 分 类 : Axure教 程 发 布 时 间 : 2013-07-24 21:48 ė 6 没 有 评 论 编 辑 本 文 出 自 诉 客 ▪ 产 品 经 理 的 心 声 , 转 载 时 请 注 明 出 处 及 相 应 链 接 。 倒 计 时 在 购 物 网 站 中 的 使 用 十 分 广 泛 , 所 以 很 多 做 购 物 网 站 的 产 品 你 原 型 中 要 做 倒 计 时的 效 果 。 其 实 本 来 没 有 写 这 个 教 程 的 想 法 , 恰 巧 今 天 有 人 给 我 看 了 一 个 做 好 的 倒 计 时 axure原 型 , 我 觉 得 做 的 太 复 杂 了 , 因 为 在 那 个axure原 型 中 把 时 分 秒 分 别 通 过3个 全 局 变 量 来实 现 数 值 的 变 换 。 这 样 做 会 导 致 全 局 变 量 使 用 太 多 , 特 别 像一 些页面较多 的 网 站 原 型 中 , 全局 变 量 的 使 用 是比较多 的 , 太 多 的 全 局 变 量 势必会 影响完成原 型 的 效 率。 再有 就是在 赋值 的过 程 中 也会 变 的 繁琐, 因 为 全 局 变 量 需要 进行初始化。 要 实 现 的 效 果 : 本 教 程 示例下载 地址:小 楼 axure 图 文 教 程 ( 十 七 ) 倒 计 时 效 果 我 们还是先进行一 下分 析, 在 今 天 的 分 析中 , 我 们用 另外的 一 个 方式-脑 图 。 这 是产 品 经理 除了axurerp之外的 又一 利器。 如 上 图 所 示 : 就 是 我 们 要 做 的 这 个 原 型 所 涉 及 到 的 全 部 。 下 面 就 是 实 现 过 程 了 : 1、 将所 需元件全 部 准备好,并按照上 图 要 求设置完毕。 2、 倒计时的 持续需要 循环的 支持,简单来说就 是 利用动态面 板的 显示 和隐藏事件来实现 循环,在面 板显示 时改变相应数值,然后让面 板隐藏激发面 板隐藏事件,面 板隐藏时等待1000毫秒用来实 现 读秒效果,再让面 板显示 激发面 板的 显示 事件,如 此循环往复,就 达到效果了 。 3、 在显示 面 板改变数值的 操作中,我 们 需要 按上 图 中的 多个 条件进行判断,并执行相应的 改变数值的 操作。 4、 倒计时数值小于 10的 时候,数值的 长度由 2位变成 1位,这 个 时候我 们 可以通过判断数值的 长度来确定是 否在前面 加 0。 也许有同学不理解,都知道小于 10要 补 0了 ,干嘛还要 判断长度?是 这 样的 ,因为我 们 做 的 是 循环,如 果不判断长度,就 会在每次改变数值的 时候都补上 1个 0。 数值会不断的 变长,不信你试试! 实 现 过 程 大概就 是 这 样了 。 下 面 我 们 用两幅图 来表示 全 部 事件的 设置和局部 变量以及 函数的 使用方法。 一、局部 变量使用方法 二 、局部函数的使用 三 、整体事件示例