变量的使用案例
这里展示了许多包含变量的使用案例。学习在实际案例中如何使用变量,如何应用于交互动作。打开原型亲自体验,还可以下载源文件查看制作方法。
实际使用案例:
想要学习关于表达式的案例,请进入这里。
加入我们的社区并向ProtoPie的其他用户学习。参与、询问以及分享你所想到的一切。寻求和查看其他用户已经共享的提示、技巧以及解决方案。
- ProtoPioneers Community
- Discord上的 ProtoPie
- ProtoPie YouTube页面
- ProtoPie用户Facebook页面
- ProtoPie 官方QQ用户群:320684572,69980214
进度条
将圆形图层的位置与变量连接起来。当拖动和移动圆形图层时,变量将自动计算该位置的值并将其储存在变量中。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/bcd7cf148b9edeba5acb35a4f40a100128818cae-1718x1298.gif/range-slider.gif)
下载并体验案例中的原型。
在其他场景中使用已输入的值
将输入图层中的值储存在一个变量中,并在不同的场景中被使用。例如,要使用用户输入的名称、密码、电子邮件等信息。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/6b8bb38465b6bb612ec398355034bdda0aa801c7-1842x1318.gif/using-data-elsewhere.gif)
下载并体验案例中的原型。
计算余额
在银行转账时计算账户余额。为了进行实际计算,请使用运算从当前余额中减去转账金额。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/6ef94b3af89a76dbbdf4ac29ae71f4b13a825a62-1714x1306.gif/calculatind-the-remaining-balance.gif)
下载并体验案例中的原型。
保存购物车信息
将商品添加到购物车,并根据添加的商品自动计算和显示购物车中的总金额。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/54f389e4afd2890822881ce59af4d2eaf32851c4-1688x1250.gif/shopping-cart.gif)
下载并体验案例中的原型。(原型作者Soda Design)
计时器
计时器每隔60秒,分钟的位置上就会添加一分钟。通过给各个数字设置条件,还可以制作倒计时计时器。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/6528967c3a909943667eda53e775927857a8f7e1-1666x1280.gif/timer.gif)
下载并体验案例中的原型。(原型作者Eduardo Sonnino)
滚动时隐藏或显示顶部菜单
向上或向下滚动到一定位置时隐藏或显示顶部菜单。本案例使用了预定义变量$touchVelocityY来识别滚动位置。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/228c16e4a390cf0c8f5c4071b7c6f561862dc2b8-1810x1312.gif/scroll-sticky-header.gif)
下载并体验案例中的原型。
启用键盘视图
当键盘从设备显示屏底部弹出时,其他的设计区域根据键盘高度进行移动。本案例使用了预定义变量$keyboardHeight来自动计算键盘高度。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/9bd3d9a2d30cecc71a1f4a455365e52ad2dab0be-1654x1308.gif/enabling-a-keyboard-view.gif)
下载并体验案例中的原型。
识别语音内容
在开启语音识别触发的状态下,使用预定义变量$voiceTranscript可以识别语音。可以朗读出识别到的文字,或通过文本反应将听到的话转化成文字显示在文本图层中。
下载并体验案例中的原型。