使用案例

这里展示了许多包含变量的使用案例。学习在实际案例中如何使用变量,如何应用于交互动作。打开原型亲自体验,还可以下载源文件查看制作方法。

了解更多关于变量表达式的内容。

实际使用案例:

想要学习关于表达式的案例,请进入这里

加入我们的社区并向ProtoPie的其他用户学习。参与、询问以及分享你所想到的一切。寻求和查看其他用户已经共享的提示、技巧以及解决方案。

进度条

将圆形图层的位置与变量连接起来。当拖动和移动圆形图层时,变量将自动计算该位置的值并将其储存在变量中。

[object Object]

下载并体验案例中的原型。

了解更多关于联动, 监听函数的内容。

在其他场景中使用已输入的值

将输入图层中的值储存在一个变量中,并在不同的场景中被使用。例如,要使用用户输入的名称、密码、电子邮件等信息。

[object Object]

下载并体验案例中的原型。

了解更多关于监听自动加载图层属性的内容。

计算余额

在银行转账时计算账户余额。为了进行实际计算,请使用运算从当前余额中减去转账金额。

[object Object]

下载并体验案例中的原型。

了解更多关于运算条件组件的内容。

保存购物车信息

将商品添加到购物车,并根据添加的商品自动计算和显示购物车中的总金额。

[object Object]

下载并体验案例中的原型。(原型作者Soda Design)

了解更多关于运算函数条件的内容。

计时器

计时器每隔60秒,分钟的位置上就会添加一分钟。通过给各个数字设置条件,还可以制作倒计时计时器。

[object Object]

下载并体验案例中的原型。(原型作者Eduardo Sonnino)

了解更多关于运算条件监听的内容。

滚动时隐藏或显示顶部菜单

向上或向下滚动到一定位置时隐藏或显示顶部菜单。本案例使用了预定义变量$touchVelocityY来识别滚动位置。

[object Object]

下载并体验案例中的原型。

了解更多关于预定义变量监听的内容。

启用键盘视图

当键盘从设备显示屏底部弹出时,其他的设计区域根据键盘高度进行移动。本案例使用了预定义变量$keyboardHeight来自动计算键盘高度。

[object Object]

下载并体验案例中的原型。

了解更多关于预定义变量光标反应的内容。

识别语音内容

在开启语音识别触发的状态下,使用预定义变量$voiceTranscript可以识别语音。可以朗读出识别到的文字,或通过文本反应将听到的话转化成文字显示在文本图层中。

下载并体验案例中的原型。

了解更多关于预定义变量语音交互功能的内容。

Back To Top