![5e861d334b9556a2307ab485ff4cdef3.png](https://i-blog.csdnimg.cn/blog_migrate/8bb757469ac896d947a864057d782f36.png)
用Axure来制作一个可使用的计算器,可以深入的学习一下Axure整个事件系统,在国外的产品设计圈很流行,今天就给大家分享一下制作过程,大家快去动手做一个吧~
咱们先看一下效果:
![406d57580988373ac4fc8677c2cb13b5.gif](https://i-blog.csdnimg.cn/blog_migrate/95deda7182b9515ebd6dbf924258a5ed.gif)
完整版体验地址:
http://axure123.com/calc/
(已手机适配)
一、图像设计部分
这部分比较简单,咱们参考iOS原生的计算器,图形如下,统一用基本图形,矩形+圆形。
从上到下一共四个部分:
结果展示区,运算符,数字,其他功能(清零/小数点)
![3757f30f704ebe6d613edc72d4943ed7.png](https://i-blog.csdnimg.cn/blog_migrate/41dfe271b99c130db949da5c0226868d.jpeg)
二、变量与事件说明:
1、涉及到的变量说明:
①全局变量
![ecb06f4d4789f68556a028d6a4ea4bf9.png](https://i-blog.csdnimg.cn/blog_migrate/50d239090bfc08f991be4a72a77cf9ef.png)
Calc:用来记录当前的运算符 + - x ÷,分别用 1 2 3 4记录,0代表运算符为空
TmpNum:用来存储“点击运算符之前”输入的数字
Flg:用来标记上次输入的是数字还是运算符,如果是数字则为0,运算符为1
②局部变量:
LVAR1:用于获取当前展示的结果数字(Result框的值),后续可用于保存到TmpNum,或参与计算
![9918d651d8dd3523f032f3d30d3a74d3.png](https://i-blog.csdnimg.cn/blog_migrate/3215f7c410abfeafaef553530d8555d9.png)
另外这里还用到了一个函数,concat,用于在变量后连接一个字符串,LVAR1.concat("123"),代表把123字符串连接到LVAR1变量后。
2、数字区事件: 0~9
每次点击需要做如下判断
① 判断当前输出结果是否为0,如果是0,则替换为点击的数字。
② 判断前次输入,如果击了运算符,则数字重新累计,反之继续累加
![1d186bec0801b2246260145421e15eed.png](https://i-blog.csdnimg.cn/blog_migrate/a46759eccf4197aac8ee10e4f6ba362d.png)
3、运算符事件: + - x ÷
每次点击需要做如下判断
① 判断前次输入,如果是运算符,则设置calc=对应运算符
② 判断前次输入,如果不是运算符,则TmpNum = 展示数字,设置calc=对应运算符
![cbac5e230132afdefa1b9708ce5d4382.png](https://i-blog.csdnimg.cn/blog_migrate/a6b03789576ed1a294e1082401ce963f.png)
4、其他事件:
①等号=:判断运算符, 计算输出结果 = TmpNum 运算符 当前展示数。
![2a60b4ec63be49d9cc7908ca90338f0f.png](https://i-blog.csdnimg.cn/blog_migrate/4e34378f49fd1dc69c9dffac9164a552.jpeg)
②小数点:点击后“.”连接在前一个数字后(这里简化处理)。
![0dbb5b2f8914689a12c1f35bac6dc4b4.png](https://i-blog.csdnimg.cn/blog_migrate/b7ca97247f99142fe6f47626a4f7ea2c.png)
③AC:清空所有计数,清空运算符
![9f27911f35371632ae9c1bded4b10bbc.png](https://i-blog.csdnimg.cn/blog_migrate/3501a3ae707f2e58438f8cdc42aeb0c4.png)
好了,运行一下,一个计算器就这样完成了,还挺有意思的吧。
当然,这个计算器并不完美,还有很多问题可以优化,比如:连续运算,小数点,iOS的+/-%等等,下边说一下后续优化的思路,感兴趣的同学可以继续。
提升1:连续运算的设计思路:
每次点击“运算符”按钮时,需要判断前一个“运算符”是否已经计算完毕
①如果已经计算(点击过=进行计算),则只进行替换运算符
②如果还没进行计算,需要先进行结果运算,再进行赋值运算符
如下case以运算符“+”为例进行说明:
CASE1:
条件1:判断前一项输入是否为数字(Flg=0)
条件2:判断当前运算符是否为空(Calc=0)
执行1:把用户输入的数据存储起来(TmpNum),用来后续运算使用
执行2:设置当前输入为“运算符”(Flg=1)
执行3:设置当前运算符为+(Calc=1)
![91e3d33fb4d2f92923be377eea57cffa.png](https://i-blog.csdnimg.cn/blog_migrate/aec56d4844024b9eb3b1fd7b24acc491.png)
CASE2~5:
条件1:判断前一项输入是否为数字(Flg=0)
条件2:如果当前运算符为“+”(Calc=1),其他运算符要对应赋值(2~4)
执行1:对现有数据进行计算,并输出结果到Result展示
执行2:设置当前输入为“运算符”(Flg=1)
执行3:设置当前运算符为“+”(Calc=1),其他运算符要对应赋值(2~4)
![e48a02a4c41e738b05a4f2b65b1d9861.png](https://i-blog.csdnimg.cn/blog_migrate/af9ce94d2d1f6ccfa21cc38115d5c49e.png)
![643b042d9d199ae83922288192e27e8c.png](https://i-blog.csdnimg.cn/blog_migrate/281965fddb9bf4586a83921f3c393f23.png)
提升2:按钮【+/-】 的实现:
【+/- 】用来转换正负值,设计思路:Result = 0-Result
![1b1d25e5e0ceb60a493b255accc6ef6f.png](https://i-blog.csdnimg.cn/blog_migrate/e6d35c4f66d46f26769829efd7b47bf0.png)
case如下:
![a57039189d647d452770aa8509b01a88.png](https://i-blog.csdnimg.cn/blog_migrate/2b14f6a8e8126c0cc72fc021ceedc5a2.png)
提升3:按钮【%】 的实现:
【%】用来计算百分比,设计思路:每次点击Result = Result/100
case如下:
![671b2755bf15349e58e2a7cf0ce37037.png](https://i-blog.csdnimg.cn/blog_migrate/88b594b6a8386505440148ed5f1898a6.png)
提升4:按钮【.】 的优化:
小数点应只能点击一次,优化思路:
每次点击【.】判断Result中是否已经包含 小数点,只有在没有小数点的情况下输入。
case如下:
![5c400d51bd7e7d3a1276e42485b79fbd.png](https://i-blog.csdnimg.cn/blog_migrate/56b697c2482f90e05b9c261777cc6503.png)
![902b13163cafed69eb2809e413ec8c2f.png](https://i-blog.csdnimg.cn/blog_migrate/28e2bdbbb15d874d6f32bdc29e101487.png)
至此,一款仿iOS版本的计算器(完整版)就完成了,快去试试吧。
![c6f42e9c8b33637f04a1cf760f585898.gif](https://i-blog.csdnimg.cn/blog_migrate/a2f08d2e65878f9d031c569f195d152c.gif)
完整版体验地址(手机适配):
http://axure123.com/calc/