找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 907|回复: 0
打印 上一主题 下一主题

Axure:一个简单的进度条,了解“触发事件”动作

[复制链接]

2536

主题

2536

帖子

7532

积分

论坛元老

Rank: 8Rank: 8

积分
7532
跳转到指定楼层
楼主
发表于 2018-8-25 10:27:29 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

                                                                 
                                    

本文通过制作一个简单的进度条,顺便来了解一下“触发事件”动作。
先看效果:

涉及知识点:
  • “设置尺寸”动作;
  • 元件变量:Target;
  • 元件属性:height(元件高度)、width(元件宽度);
  • 数学函数:math.floor() – 返回小于或等于一个给定数字的最大整数 —— 算法;
  • 了解“触发事件”动作 —— 循环关键点;
  • 了解“等待”动作 —— 与觖发动作结合使用才能有效循环;
  • 了解动作执行的前提条件。
    实现目标:
  • 完成需求:点击开始,进度条自动填充满,并在此过程中不断更新当前进度 – 百分比;
  • 练习目的:通过使用“触发事件”,完成自循环及停止循环。有别于常用的动态面板循环机制。
    [/ol]难点:
    如果只是自动充满,那么用一下设置尺寸,加一个动画就可以搞定。但是这个百分比一直在变,就需要动一点点小心思了。
    以下是具体步骤1. 准备素材三个矩形:
    (1)背景框 – 命名为背景框
  • 填充颜色:不透明度0(即全透明)—— 目的:底下的进度条变化时能看到 —— 重要;
  • 元件宽高:400 * 40 —— 重要,但可自动设置;
  • 元件层级:置于顶层(至少要保持在进度条的上面) —— 重要;
  • 默认文字:0% —— 不重要,可无任何文字。后期动作执行之后会自动显示;
  • 文字大小、文字颜色、文字排版、线段等都不重要,可自动设置。
    问题思考:
  • 为什么填充颜色是全透明的,文字及边框还可见呢?
  • 怎么设置能让它们一起透明呢?
    (2)进度条
  • 填充颜色:与背景色不同即可 —— 此用例使用的是CCCCCC,可自行设置其他颜色 —— 重要;
  • 元件宽高:1 * 40 —— 默认是进度是0,所以宽为0,但是axure元件宽高的最小值只能到1,故此处是1。高不可大于背景框的高 —— 重要;
  • 元件层级:置于底层(至少要保持在背景框的下面) —— 重要;
  • 元件位置:等于背景框位置(左上角);
  • 不要放文字。
    (3)开始按钮
    无特殊说明,可自行设置。用于交互动作(此处是点击)。
    也可以省去此元件,直接将交互动作放置于“背景框”,或者页面载入时……

    由到进度条为宽度1,与背景框的边线重合了,故好像没有进度条。
    2. 动作设置梳理一下进度条执行的逻辑,尝试画个流程图。

    翻译成大白话就是:
    如果进度条满了,就不执行(什么都不做),如果没满就:
  • 改变进度条的宽度;
  • 更新百分比;
  • 等待 1 毫秒。
    再来一次 – 再执行一次“点击开始”。
                                                                     
                                                                           
  • 分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    用户反馈
    客户端