Axure系列：动态面板实现二维码双向扫描

准备好以下元件

Line，椭圆形状（width：200，height：2），输入文字1，并设置文字颜色为无

QR，二维码（width：180，height：180）

transfer动态面板，添加两个状态，状态中不加元件。（预览时，动态面板不可见）

分析一下思路，实现的效果是：line自动的上下来回移动，达到扫描效果。

需要自动循环，而动态面板transfer载入时可自动循环，动态面板transfer循环的同时移动line

line上下来回移动，有相应的界限，用QR来限定

line上下匀速移动

现在按照思路开始添加事件

1、动态面板载入时候每隔10ms自动切换状态，实现循环。注：当前元件就是transfer动态面板

2、让transfer动态面板状态在变化时移动line，移动距离为[[Target.text]]（目标line的文字，还记的上文设定line的文字为1吗？），对动态面板的事件则翻译为：载入时，每隔10ms自动切换状态，状态改变时移动line到相对位置（0，[[Target.text]]）

由于line的位置一直在变化，所以用相对位置，每次都移动和上次移动的相对位置

3、那line在移动的时会一直往一个方向走，让它来回移动，则当line的top（顶部）和二维码QR的top平齐时，让line往下移动；当line的bottom（底部）和二维码QR的bottom平齐，让line往上移动。往上移动是负数，往下移动是正数。添加事件如图

注：上文说到的[[Target.text]]就一会儿是1一会儿是-1

4、到此二维码双向扫描的效果就完成了。

最后

演示地址：https://limumu1992.github.io/4shuangxiangsaoma/

源文件地址：http://pan.baidu.com/s/1qY1B9cK 密码：6pi6