使用ivx实现文本纵向和横向滚动效果的经验总结

在案例中，为了使展示效果更佳，我们通常可以给文本加上一个纵向或者横向的滚动效果，其基本原理就是将文本信息放入一个数组循环创建，通过触发器不断调整它们的坐标，每当第一个元素内容滚动出界面就将其调整至一维数组的末尾，下面就来讲一讲具体步骤吧。

一.纵向滚动
1.界面
首先搭建一个如下图所示的简易界面，在绝对定位容器内进行循环创建，数据来源为一个一维数组，点击add按钮可以将输入框的内容添加到一维数组的末尾。


2.文本组件的坐标
由于循环创建是在绝对定位环境下，所以我们需要设置创建出来的每一个文本组件的XY坐标，不过由于列表中文本组件的X坐标都是相同的，因此我们只需要考虑Y坐标的值。这里我们借助循环创建中的参数“当前序号1”，因为已经设置了每个文本组件的高度是50px，而“当前序号1”的值又是0，1，2…，所以令每个文本组件的Y坐标为当前序号50，它们即可从上到下依次排列。

3.缓动距离
上一步中应该注意到文本组件的Y坐标用当前序号1乘以50之后还减去了一个数值变量“缓动距离”。因为文本向上滚动是一个逐渐滑出界面的过程，这里用“缓动距离”表示文本滑出界面部分的高度，而且当第一行文本向上移动后其它文本组件的位置也会随之改变，因此每个文本组件的Y坐标都要再减去一个“缓动距离”。