“大爆炸”是锤子科技发布的手机操作系统中的代表性功能，可以将一大段文字分解成多个字符，并通过选择“炸”出来的字符组成新的文本。

本案例通过 Axure 制作出类似的效果，效果如下图所示，左边输入需要“炸”的文本，点击【“炸”文本】后，右边将每个字和符号分解为单个的字符，通过选择字符后，点击【生成新文本】，将按照点选的字符组成一段新的文本。

本文将分享该案例的设计过程。

“炸”文本

左边的【待“炸”文本】是一个文本域，用来输入内容。

右边的【已“炸”文本】是一个中继器，中继器里面放一个矩形，用来显示字符；每一个字符都是中继器内的一行数据。

下方的【新文本】中放了一个文本元件，用来显示生成的新文本，默认没有内容。

下图是中继器的配置及结构：

其中，【content】列用来保存字符，【is_select】用来保存字符的选择状态。

在中继器【项目载入时】，给矩形设置文本，目标为【content】：

【“炸”文本】的原理是将左侧【待“炸”文本】中的内容逐字添加到右侧【已“炸”文本】的中继器中，这里需要用到事件的循环。

首先，需要一个全局变量【step】用来记录当前添加到第几个字，默认值为0，表示从第1个字符开始添加：

下图是【“炸”文本】按钮的交互配置：

这里先判断【step】的值是否小于【待“炸”文本】的长度，如果是，表示文本还没添加完，此时执行的操作就是先往中继器内的【content】添加一条数据，函数的意思是从【step】的位置起，取一个字符；然后给【step】加1，这样再次取的时候，就会取到下一个字符；最后是等待0ms后，触发一次当前按钮的点击操作，这样这个添加的事件就会循环起来，每循环一次，就往中继器添加一个字符，直到【step】的长度等于【待“炸”文本】的长度，表示全部字符已经添加完，此时将【step】设为0即可，这样下次又会从头开始取字符。

这样就完成了“炸”文本的操作。

生成新文本

首先需要给中继器内的矩形添加【选中】的交互样式：

接下来给矩形添加交互：

1. 【载入时】，判断【is_select】的值，如果为“yes”，选中矩形，反之则取消选中。

2. 【点击时】，切换矩形的选中状态。

3. 【选中时】，将当前行的【is_select】更新为“yes”。

4. 【取消选中时】，将当前行的【is_select】更新为“no”。

5. 【显示时】，如果当前行的【is_select】为“yes”，则将文本拼接显示给下方【新文本】中的文本元件，【concat】是字符串拼接函数，可以在原文本后面追加拼接新的文本。这里的【显示时】可以理解为一个封装好函数，设置完之后，只需“调用”它就可以了。

完成了以上配置，最后只需在【生成新文本】点击时，调用中继器内矩形的【显示时】的事件即可：

记得先将原来的文本清空，否则会一直在之前已有的文本后面追加新文本。

以上便是本文的全部内容，感谢阅读，以下提供本文案例下载。

大爆炸（炸文字）.rp