ssRender利用数值与图片Image绑定实现车速变化(一)

        为什么要用Image实现车速，因为利用图片会显示一些效果，比如车速的倒影，使用Text是无法实现的。首先要知道车速的最大值，比如：260，是一个三位数，我的想法就是把车速数值拆分开来(个位/十位/百位)与图片资源Image(0.png~9.png)来对应显示车速就可以实现车速值变化。

整体效果

如何取出车速数值的每位数字：

        个位：speed%10，对10取余得到的是当前车速的最后一位

        十位：speed/10%10，因为想要取出十位数字，就要把个位上数字去掉，所以先除以10，再取模运算，就把十位上的数字取出来了

        百位：speed/100%10，百位上除以100，再取模即是百位上的数字取出来了。                 

第1步：创建工程节点

        在Project窗口，工程树形结构如下图所示，创建节点详见表格。

节点名称	节点类型	描述
DB	Item	控制车速值
Cluster_BG	Item	汽车表盘背景
root	Item	表示车速值的父节点
bit0	Item	表示车速的个位
bit1	Item	表示车速的十位
bit2	Item	表示车速的百位

第2步：导入工程Image资源

        Resource窗口，Image标签，点击New Image，在打开的文件资源管理器中选择Image，点击打开。

第3步：创建自定义车速speed

        在Resource窗口，Property标签，点击New Property，创建自定义属性speed，拖拽speed自定义属性至BD节点的Properties窗口。

第4步：建立绑定关系

• 个位节点bit0节点→点击source属性右侧绑定按钮，在弹出的Binding界面，Expression编辑器中输入：

        var bit0 ={$../../../DB/speed}

        (bit0%10)+".png"

        点击OK

        注：①var 定义变量②{$../../../DB/speed}把自定义属性拖拽过来即可

• 十位节点bit1节点→点击source属性右侧绑定按钮，在弹出的Binding界面，Expression编辑器中输入：

        var bit1 ={$../../../DB/speed}

        (bit1/10%10)+".png"

        点击OK

• 百位节点bit2节点→点击source属性右侧绑定按钮，在弹出的Binding界面，Expression编辑器中输入：

        var bit2 ={$../../../DB/speed}

        (bit2/100%10)+".png"

        点击OK

        另外，需要注意的事，当车速为一位数时，需要把十位和百位的数隐藏；当车速为两位数时，需要把百位的数隐藏，请进行如下操作：

操作一：

        选中bit1十位Item节点，在Properties窗口，点击Visible属性右侧绑定按钮，在弹出Binding界面，Expression编辑器中输入：

var a = {$../../../DB/speed}

(a<261):1

(a<10):0

点击OK

操作二：

        选中bit2百位Item节点，在Properties窗口，点击Visible属性右侧绑定按钮，在弹出Binding界面，Expression编辑器中输入：

var a = {$../../../DB/speed}

(a>99):1

(a<10):0

点击OK

第5步：修改自定义属性值speed

        选中DB节点，在Properties窗口，修改自定义属性speed值，来看看如下效果 。 

总结：

        ssRender工具完成车速数字与Image的联动显示效果，操作简单，通俗易懂，只需要把数值拆分来看就可以实现。

        细心的小伙伴可能已经发现个问题，车速在一位、二位、三位数变化时，个十百位的位置不变化，那么这个问题后续解决。今天的分享就到这里了。感谢。