记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 154551|回复: 0
收起左侧

[UI教程] Protopie制作购物车商品数量计数[含30P]

[复制链接]
发表于 2018-10-8 08:33:27 | 显示全部楼层 |阅读模式
国庆假期结束了,protopie也在这期间更新了3.9.1的版本,新加入了表达式/变量和键盘还有回车等功能!所以今天写了一个小教程带大家来看看这个新功能!
当然你想了解更多可以前往官方查看!本期教程的源文件会在文章最后提供给大家!


1.前期准备



本期教程将模仿淘宝购物车的里面的商品加减交互来探索protopie的新功能!大家也可以自己打开淘宝啊什么的购物网站看看!
首先我们需要简单分析一下:
1.我们点击加减按钮时,输入框的值会变化
2.我们点击输入框输入0时,会有错误提示
3.输入框数量为1时点击减按钮,这个时候也会有一个错误提示
4.点击输入框会有一个弹窗修改数量(这个本教程不会讲,大家可以自己思考下怎么做)
5.这里要用到表达式和输入框,变量。
官方基础教程 (表达式变量等基础教程这里有介绍,大家可以前往查看)
第一步
素材的制作:XD PS AI Sketch都可以(我这里用XD,因为XD和sketch都是很好的支持protopie)

第二步
将制作好的素材导入到protopie里面(ctrl+ALT+E)然后他会自动打开你的protopie,在弹出的地方我们可以保持默认设置。




第三步
我们可以打开预览窗口检查一下我们的素材,然后就可以根据上面的分析开始制作交互所需要的其他东西!


1.1设置变量
点击变量,在展开的变量区域(层)后面点击加号,添加一个变量并且命名为number(名称可以是英文或者是拼音但不能是中文字符






提示:这里添加变量的两种方式都可以,本教程使用第二种(仅适用于当前场景)可以根据实际情况变换使用。
设置变量的类型为数字,默认值为1
1.2添加输入文本框
点击文本工具,选择输入。然后选择输入框在属性栏里面讲默认文本设置为1,键盘类型设置为数字,回车设置为完成。
键盘类型是指点击输入框时设备默认唤出的输入法状态。回车-完成的意思敲击输入法回车时完成什么动作。


然后我们把输入框位置移动到数字显示区域,然后设置文本居中对齐,字体颜色黑色!


1.3添加一个提示语
点击文本添加一个默认文本,将位置移动到加减数量的下方,然后输入“最小只能输入1哦”字号可以设置为10,颜色可以改为红色!可以提前复制一份命名为提示语2.后面会用到。


然后我们将其透明度改为0,当然你可以为这个文本重命名为提示语!


ok,到这里基本上准备工作OK了,你们我们现在来制作效果吧!
2.输入数值的效果
步骤1
首先我们要给我们的变量一个监听,在监听下面加入一个文本,参数设置如下图!




步骤2
接着我们给输入框一个监听。因为输入框我们是要输入东西的,所以我们需要有一个条,那就是如果我们输入了一个数值为零,那么提示语就会出现,然后输入框的值变回默认值1.


提示:选择表达式后点击输入框后面的加号就可以选择性输入表达式!


添加一个文本,将其设置如下图(这一步的意思就是说,只要满足上面的条件,那么输入框的数字就会是变量number的值
步骤3
假如我们输入的值大于0,那么输入框就读取我们输入值为最后确定值。
再添加一个文本,设置如下图(当满足了上面的条件,输入框的值就会是输入的值)


步骤4
我们可以在条件1的下面添加2个透明度来制作当输入0时的错误提示!
第一个设置提示语的透明度为100,第二个设置为0,具体参数如图!




好了,你可以预览一下他了,当然用手机预览很直观,你也可以用电脑预览,直接用键盘输入就好了!
提示:提示语这个步骤你可以事先做,也可以后面加,但是切记得是,他所执行的顺序是按这个层顺序来的,所以后面加记得放到相应的顺序哦!
3.按键制作加减法效果
步骤1
选择减法按钮,添加单击。然后我们需要做的是给他一个赋值的动作,赋值给谁?当然是我们的输入框!
那么,我们输入框的值大于1的时候怎么办?等于1的时候是不是我们就不能再减了?所以我们这里还是需要添加条件!
首先第一一种情况!大于1的时候!


参数如图设置,至于为什么这里的表达式变了,是因为我们的输入框此时此刻是阔以输入负数的,还有表达式预设里面没有判断输入框是否输入的是数值还是文本,然后文本是不能与数值做减法的,所以在这里我取这个输入框的文本的绝对值去减去1。切记表达式一定要在英文输入状态下输入!


步骤2
然后我们的减法做好了,假如等于1的情况下我们点击减法按钮会怎么样?会没有反应,所以我们给一个提示好了,这个时候需要一个条件!(就是输入框的值等于1的时候出现提示语)参数如下图:





步骤3
减法做了我们开始做加法,加法就很简单了对吧,毕竟减法都做了。选择加法按钮添加单击动作,然后加入文本,参数如图!




这个时候我们可以连接手机预览效果了

好了教程到这里就结束啦!谢谢大家!别忘了练习下哦!下期见!






                       
微信公众号:搬运工米夏小雨

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x




上一篇:教程:表达式驱动杠杆
下一篇:打造人像水彩效果制作教程
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )