跳到主要内容

转换器

转换器会在值应用到绑定之前对其进行转换。

使用转换器可以让数据适配你要绑定的属性——例如,将数字转换为字符串、在不同范围之间映射值,或随时间平滑变化。

添加转换器​

构建并应用转换器

  1. 创建转换器

    在 Assets 面板中,点击 + 按钮并选择一个转换器类型。

  2. 设置转换器选项

    选中转换器后,在右侧边栏中更新设置。

    大多数选项都可以进行数据绑定。

  3. 应用转换器

    在设置或更新绑定时,设置 Converter 字段。

转换器类型​

转换器可以单独使用,也可以组合到组中,以执行更复杂的转换。

每个转换器都有自己的一组选项,其中许多选项都可以绑定到其他 View Model 属性。这使得转换器行为可以动态更新。例如,你可以绑定范围映射的最大值、公式中的乘数,或字符串转换器中的填充数量。

类别转换器描述
StringPad为字符串添加填充
StringTrim移除开头或结尾的空白字符
StringConvert to String将值转换为字符串
StringRemove Trailing Zeros移除不必要的小数零
NumberRound四舍五入到最接近的值
NumberCalculate执行简单计算
NumberRange Map将值从一个范围映射到另一个范围
NumberInterpolator在值之间平滑插值
NumberFormula计算自定义表达式
NumberConvert to Number将值转换为数字
BooleanToggle反转布尔值
ListNumber to List根据数字生成组件列表
ListList to Length获取列表中的项目数量
ColorInterpolator在颜色之间平滑插值
ScriptConverter Scripts创建你自己的自定义转换器

填充(Pad)​

通过在开头或结尾重复某个值,将字符串填充到目标长度。

如果字符串短于指定长度,则会重复 pad 值并添加到字符串中,直到达到目标长度。

示例:

  • Value: 1
  • Pad: "0"
  • Direction: Start
  • Length: 3

结果:"001"


范围映射(Range map)​

将数字从一个范围映射到另一个范围。

当你想将输入值转换到另一个刻度时,可以使用 Range Map。

示例

将滑块值(0–100)转换为不透明度值(0–1):

  • Input: 50
  • Input range: 0 → 100
  • Output range: 0 → 1

结果:

0.5

数值插值器(Numeric interpolator)​

对形状进行插值

随时间在数字值之间平滑过渡,使变化带有缓动效果,而不是立即跳变。


公式(Formula)​

生成公式

Formula 可让你使用来自 View Model 或输入的值执行自定义计算。

你可以通过两种方式创建公式:

直接编写

random({{NumberConvertersVM/circleX}} / {Input}) + 2

{Input} 指传入的值,而 {{...}} 引用 View Model 属性。

使用编辑器

点击 + 按钮添加值、运算和函数。编辑器会为你构建公式,并生成对应的表达式。

💡

公式不需要输入

下面的公式会输出一个随机数,无论输入是什么。

random(2)

随机模式(Random mode)​

在公式中使用 random() 时,Random Mode 会决定何时生成新的随机值。

  • Once — 仅在公式首次运行时生成一个随机值
  • Source Change — 每次输入发生变化时生成一个新值
  • Always — 在输入变化期间以及插值过程中持续生成新值

数字转列表(Number to list)​

Number to List 转换器允许你根据数字生成指定数量的 Components。

更多信息请参阅 Lists。


颜色插值器(Color interpolator)​

对颜色进行插值

随时间在颜色值之间平滑过渡,使变化带有缓动效果,而不是立即跳变。


转换器脚本(Converter Scripts)​

当你需要内置转换器未覆盖的行为时,脚本可以让你创建自己的自定义转换器。

更多信息请参阅 Converter Scripts。

转换器组​

构建转换器组

转换器组允许你将多个转换器串联在一起,其中一个转换器的输出会成为下一个转换器的输入。

  1. 创建转换器组

    在 Assets 面板中,点击 + 按钮并选择 Converter > Group。

  2. 向组中添加转换器

    选中组后,在右侧边栏中点击 + 按钮,并选择一个现有转换器或新建转换器。

绑定值时,你的转换器组现在可以像单个转换器一样使用。

执行方式​

转换器会从上到下运行:

  • 第一个转换器接收原始输入
  • 每个转换器都会将其结果传递给下一个转换器
  • 最终输出是最后一个转换器的结果

重新排序转换器​

向上或向下拖动转换器即可更改其运行顺序。

较早运行的转换器会影响其后所有转换器。

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群