前言

在表达式输入框里可以输入数字,也可以输入含有变量的运算公式,亦或者图层的X坐标,Y坐标,宽度,高度等属性函数。利用这个功能交互效果可以更丰富,制作起来也更便捷。

表达式的输入

在计算交互具体数值时,图层的属性可以作为计算公式的一部分加入,从而让计算结果根据图层属性值的每次变化而不同。变量也可以加入计算。在交互动作属性栏输入数值的时候,点击展开按钮就会看到输入公式的窗口,输入公式的时候系统会辅助你自动完成。

表达式的输入

基础教程

表达式

表达式的基本使用方法介绍。 在反应中插入数值时,可以直接提取图层的属性。和直接输入数值不同,使用表达式时,每次交互的效果都会随着属性值的改变而变化。

变量

变量的基本使用方法介绍。您可以为变量指定数字,文本和颜色,并使用"赋值"更改变量的值,从而创建随之变化的交互。

应用案例

菜单切换

反应动作的数值不仅可以输入固定的数值,也可以输入公式,而公式里面还可以加入其他图层的属性。利用这个功能,可以更轻松制作以下案例:表示选中的背景蓝色图层,根据点击不同菜单,移动到不同菜单的X轴的位置。比如点击Menu2,蓝色图层就移动到`Menu2`.x。 这样不管Menu2的X坐标怎么变化,都可以保证蓝色背景移动到准确位置,也省去了计算Menu2坐标的步骤。

微调器

您可以使用变量创建一个加减调节的微调器。

水波纹效果

利用预定义变量,可以识别手指点击屏幕的位置。如果希望以手指点击的位置为中心显示水波纹的效果,则可以在移动反应动作的坐标值中输入 $touchX$touchY,这样就可以让水波纹图层移动到手指点击的位置之后再发生从无到有的效果。

文本输入

使用`layerName`.text 可以让输入的文本内容映射在其他文本中。也可以把`layerName`.text和其他文本内容结合起来,组成句子一起显示。

变量

ProtoPie支持变量功能。变量值的属性有文本、数字、颜色三种。通过使用“赋值”反应动作让变量的值发生变化,然后再通过“侦查“触发动作检测到变量发生了变化,只要有变化发生就会触发设定好的反应动作。另外,在反应动作的属性设置里,除了直接输入数值,还可以输入表达式,而表达式里面可以套用变量。也就是说现在调整动作属性变化的方式有两种,一种是直接输入数值,一种是通过含有变量的表达式。

适用于所有场景的变量
该变量可以在一个文件内的所用场景中使用。一般在制作跨场景的交互逻辑时使用。比如在场景1里如果“适用于所有场景”的变量发生了变化,那么可以影响场景2里面的交互也发生变化。
仅适用于当前场景的变量
该变量仅对当前场景起作用。在场景1里面制作的变量无论怎么变化都不会影响到场景B。为各场景设置独立变量时使用。

变量种类

变量的种类有三个:文本、数字、颜色。在设定变量的时候先需要选择一个种类,之后在用到这个变量时,系统就会按照相应的种类去处理。

文本
只可以设定文本类的值。即使输入的是数字,系统也会把数字按照文本去处理。
数字
只可以设定数字类的值。如果输入是文本,则会发生错误。
颜色
只可以设定#FFFFFF类的颜色值。如果输入其他格式,则会发生错误。

显示变量

在画板和预览窗可以显示变量的当前值。这个功能可以帮助在制作过程中观察变量是否按照预想的方式在变化。

预定义变量

预定义变量指的是ProtoPie自己为用户已经设定好的一些变量,用户可以直接调用。比如识别鼠标当前坐标的变量,或者识别键盘高度的变量等。

  • $touchX 点击屏幕时的X轴坐标。
  • $touchY 点击屏幕时的Y轴坐标。
  • $touchVelocity 点击后手指在屏幕上滑动的速度。
  • $touchVelocityX 点击后手指在屏幕X轴方向上的滑动速度。
  • $touchVelocityY 点击后手指在屏幕Y轴方向上的滑动速度。
  • $touchPointerCount 同时点击屏幕的手指数
  • $keyboardHeight 移动端键盘在屏幕上的显示高度。
  • $deviceOS 当前设备的系统。

表达式规则

字面量

在表达式输入窗里可以输入图层名称、数字、文本等。输入时应遵守以下规则。

图层名称

在图层名称两侧需要使用半角单引号。

图层名称

文本

在文本两侧需要使用半角双引号。

文本

文本换行

换行时需使用\n

文本换行

数字

只能使用纯数字格式,不可以加入其他符号。

数字

颜色

需使用#FFFFFF格式的颜色值。

颜色

变量

变量不需要加其他符号,直接输入变量名即可。

变量

运算符号

在表达式中可以使用加号(+),减号(-),乘号(*),除号(/),余数(%)等符号做四则运算。

余数符号(%)

触发计算时,整除部分以外余下的部分叫做“余数”。比如 5%2 表示 5除以2之后得2,余数是1,所以 5%2 = 1。

文本运算

运算符号中只有“加号”也可以被文本使用。在文本中使用加号则表示将两个文本连接。比如 文字“1”加上文字“2”的话得到的是文本“12”.

文本 + 文本

"helloworld"

"12"

文本 + 数字

"hello1234"

图层属性

图层坐标、大小等属性值可以成为表达式的一部分。

  • `layerName`.x 图层的X轴坐标值
  • `layerName`.y 图层的Y轴坐标值
  • `layerName`.width 图层的宽度值
  • `layerName`.height 图层的高度值
  • `layerName`.scaleX 图层宽度比例值
  • `layerName`.scaleY 图层高度比例值
  • `layerName`.rotate 图层旋转角度值
  • `layerName`.opacity 图层透明度值
  • `layerName`.radius 图层圆角值
  • `containerName`.scroll 当前滚页值
  • `layerName`.color 图层的颜色 HEX值
  • `layerName`.fillOpacity 图层颜色填充度的值
  • `layerName`.text 文本图层的文本内容

函数

文本处理

  • length(source: TEXT)NUMBER
    • 此函数表示求文本长度
    • e.g. length("hello")5
  • left(source: TEXT, count: NUMBER)TEXT
    • 此函数表示从文本左边开始,输出相应数字的前几个字符。
    • e.g. left(“hello”, 3)“hel”
  • right(source: TEXT, count: NUMBER)TEXT
    • 此函数表示从文本右边开始,输出相应数字的前几个字符。
    • e.g. right(“hello”, 3)"llo”
  • concat(source1: TEXT, source2: TEXT)TEXT
    • 此函数表示将两个文本内容合并
    • e.g. concat("hello", "world")"helloworld"
  • replace(source: TEXT,from: TEXT, to: TEXT)TEXT
    • 此函数表示将文本中指定部分替换成其他的内容。
    • e.g. replace("helloworld","world", "protopie")"helloprotopie"
  • trim(source: TEXT)TEXT
    • 此函数表示去除文本两边的空白。
    • e.g. trim(" helloworld ")"helloworld"
  • ltrim(source: TEXT)TEXT
    • 此函数表示去除文本左边的空白
    • e.g. ltrim(" helloworld ")"helloworld "
  • rtrim(source: TEXT)TEXT
    • 此函数表示去除文本右边的空白
    • e.g. rtrim(" helloworld ")" helloworld"
  • indexOf(source: TEXT, searchValue: TEXT)NUMBER
    • 在文本中找到searchValue后面指定的内容,计算该内容的位置值。位置值从0开始,如果没有找到指定内容则输入值为-1。
    • e.g. indexOf("hello world", "world")6
  • lowerCase(source: TEXT)TEXT
    • 此函数表示将大写字母的文本转换成小写的文本。
    • e.g. lowerCase("Hello")"hello"
  • upperCase(source: TEXT)TEXT
    • 此函数表示将小写字母的文本转换成大写的文本。
    • e.g. upperCase("Hello")"HELLO"

数学计算

  • min(source1: NUMBER, source2: NUMBER)NUMBER
    • 此函数表示取两个数字中的最小值。
    • e.g. min(0, 1)0
  • max(source1: NUMBER, source2: NUMBER)NUMBER
    • 此函数表示取两个数字中的最大值。
    • e.g. max(0, 1)1
  • abs(source: NUMBER)NUMBER
    • 此函数表示取数字的绝对值。
    • e.g. abs(-1)1
  • round(source: NUMBER)NUMBER
    • 此函数表示小数点进一位后的整数
    • e.g. round(1.5)2
  • floor(source: NUMBER)NUMBER
    • 此函数表示去掉小数点后的整数
    • e.g. floor(1.5)1
  • ceil(source: NUMBER)NUMBER
    • 此函数表示去掉小数点后,整数进1。
    • e.g. ceil(1.5)2
  • sqrt(source: NUMBER)NUMBER
    • 此函数表示取平方根,如果数字是负数则显示错误。
    • e.g. sqrt(9)3
  • pow(source1: NUMBER, source2: NUMBER)NUMBER
    • 此函数表示取number1的number2 阶乘值.
    • e.g. pow(2, 3)8
  • sin(radian: NUMBER)NUMBER
    • 此函数表示取数字的sin值
    • e.g. sin(90)-0.89
  • cos(radian: NUMBER)NUMBER
    • 此函数表示取数字的cos值
    • e.g. cos(90)-0.45
  • tan(radian: NUMBER)NUMBER
    • 此函数表示取数字的tan值//输入90度等无限计算的情况则无法计算
    • e.g. tan(45)1.62
  • asin(value: NUMBER)NUMBER
    • 此函数表示取反正弦值的弧度。
    • e.g. asin(0)0
    • e.g. asin(1)1.5707963267948966(PI / 2, 90°)
  • acos(value: NUMBER)NUMBER
    • 此函数表示取反余弦值的弧度。
    • e.g. acos(0)1.5707963267948966(PI / 2, 90°)
    • e.g. acos(1)0
  • atan(value: NUMBER)NUMBER
    • 此函数表示取反正切值的弧度。
    • e.g. atan(0)0
    • e.g. atan(1)0.7853981633974483(PI / 4, 45°)
  • random()NUMBER
    • 此函数表示在0和1中随机取得一个数字。
    • e.g. random() ➔ 0-1 사이의 random한 숫자
  • random(min: NUMBER, max: NUMBER)NUMBER
    • 此函数表示在指定区间内随机取得一个数字。
    • e.g. random(1, 5) ➔ 1-5 사이의 random한 숫자
  • randomInt(min: NUMBER, max: NUMBER)NUMBER
    • 此函数表示在指定区间内随机取得一个整数。
    • e.g. randomInt(1, 5) ➔ 1-5 사이의 random한 숫자(정수)

颜色

  • color(red: NUMBER, green: NUMBER, blue: NUMBER)COLOR
    • 此函数表示将RGB的色值转化为#FFFFFF
    • e.g. color(255, 255, 255)#FFFFFF
  • red(source: COLOR)NUMBER
    • 此函数表示将十六进制的色值转化为RGB后提取其中的红色值
    • e.g. red(#FF0000)255
  • green(source: COLOR)NUMBER
    • 此函数表示将十六进制的色值转化为RGB后提取其中的绿色值
    • e.g. green(#FF0000)0
  • blue(source: COLOR)NUMBER
    • 此函数表示将十六进制的色值转化为RGB后提取其中的蓝色值
    • e.g. green(#FF0000)0

文本转换

  • text(source: NUMBER)TEXT
    • 此函数表示将数字格式转换为文本格式
    • e.g. text(1234)"1234"
  • number(source: TEXT)NUMBER
    • 此函数表示将文本格式里的数字转换为数字格式
    • e.g. number("1234")1234
  • color(source: TEXT)COLOR
    • 此函数表示将文本格式里的数字转换为十六进制的色值。但如果输入的文本不符合十六进制的色值表达方式,则将出现错误。
    • e.g. color("#FFFFFF")#FFFFFF
  • format(value: NUMBER, format: TEXT)TEXT
    • 将数字转换为文本格式时,可以指定数字标记方法。 比如指定数字分隔小数点的位置,以及小数点的标记方法等等。
      number:要转换为文本的数字
      formatText:要转化的文本格式。 整数部分用#表示,小数部分用0表示,可以在中间添加分隔符的字符。
    • e.g. format(1234.567, "#,###.00")1,234.58
    • e.g. format(1234567, "#,###.00")1,234,567
    • e.g. format(1234.567, "#.###,00")1.234,57
    • e.g. format(1234.567, "#,##.00")12,34.57
    • e.g. format(1234.567, "#,###")1,235
    • e.g. format(1234.567, "#")1235
TOP