ProtoPie手机号码位数判断

近期接触了principle和protopie来做一些高保真原型的展示及交互的展示，起先用的principle，发现上手很容易也很直观，但是当效果及页面变多了之后，触发跳转的连线就会变得比较混乱，后来用protopie后清爽多了，由于两者的使用逻辑不太一样，principle偏向于补间动画的形式，protopie更像开发者的角度去思考，需要更多逻辑性，所以最后我选择用protopie来实现我的设想。

如果你有足够的耐心，感觉用protopie可以做出一个跟线上APP相似度超90%的Demo，而且不单单是界面及交互动效的相似，连条件逻辑也可以实现，真的是很强大。

下面说一下我遇到的第一个需要自己思考实现的问题，在网上搜了半天也没找到相关的案例，在阅读参考了官方文档后终于自己实现了，其实实现之后想想还是挺简单的，只要掌握了protopie的功能及逻辑，很多复杂的交互都可以慢慢实现。

这个交互是很常见的登录框输入后自动判断手机号位数并让光标消失，激活登录按钮的操作，效果如下图

第一步，先实现条款勾选的功能

这个逻辑比较简单，点击触发，条件判断【勾】图层是否为透明，透明的改为不透明，不透明的改为透明。

第二步，监听输入框，判断输入的文本长度，也就是本文的重点

根据官方函数文档

我们把表达式

length(`请输入手机号`.text)

写入条件判断中，【`请输入手机号`】为图层名称，.text为图层的文本内容，当输入的文本长度等于11位的时候，提交框的背景色被修改成激活状态，并让输入框的光标消失，这样用户就无法继续输入了。

当输入的文本长度小于11位的时候重置提交框的背景颜色，也就是变为灰色，表示无法提交。

因为我们设置了监听触发，所以每当输入框发生变化的时候，它就会自动判断一次，也就是实时监测的。

第三步，就是最后的提交按钮，判断各条件是否符合

只有当勾选项的透明度是100%，提交背景是激活状态，然后手机号不是10000000000时（我设置的一个提示账号不存在的特例），同时满足这些条件才转场。

当手机号是10000000000，提交背景激活时，重置提示框的文本（因为我下面会涉及到修改文本内容），让提示框透明度100%，然后延迟3秒后让提示框透明度0%。

当勾选项的透明度是0%，提交背景是激活状态时，让提示框透明度100%，同时由于我用的是同一个提示框，所以就把文本内容改成“请先阅读并同意相关法律条款”，然后文本内容Y轴上移了75，然后延迟3秒后让提示框透明度0%。

好了，所有条件设置完毕，可以预览看看效果了。

举一反三，此函数条件判断也可以用在其他地方，比如判断文本框内容是否为空等等。

附上源文件下载，供大家参考。