阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

新项目为了给客户演示高保真的移动设备交互原型，故采用JustinMind工具。

国内资料很少，好在阿西使用过多款交互设计工具，大体都差不多，摸索着前行吧。。。

1.认识一下JsutinMind里的，这个动态面板理论上和axure一样

2.我们创建一个5层的动态面板

3.选择面板：Panel_2

双击图片更换图片

4.添加交互动作

选择图片后，单击Add Event

5.设置条件

5.在每个图层面板上都要设置上 这个图片焦点角标，以区分是哪个图片在当前视图。

6.你还可以在自动滑动播放幻灯片时给他加上Duang！ 加特效！

7.自动循环播放交互

依次添加交互动作：

7.1选择事件：页面载入时

7.2创建变量：J

7.3设置事件的动作步骤1先暂停6秒时间

7.4设定值1给变量J

7.5然后自动切换面板，设置动态面板to Panel_2

7.6在图片上方新增一个input输入框的部件，然后设置最底层。接着在动态面板页面载入事件的交互动作里加入最后一个动作就是设置焦点到 上面加入的input输入框部件。

7.7上面已经完成了一张图片所需的所有交互动作如下图所示：

7.8后面还有4张幻灯片怎么切换尼？这时候就用到上面7.6加入的input部件了，选择这个部件加入交互事件：

简单描述一下7.8 并不复杂，就是同样的交互动作，复制出来4份，我们看一下逻辑：当变量=1时候1.暂停6秒 2.设定变量值=2 3.设置动态面板切换到2，设置焦点给Input部件(没错，每次都要重新获取焦点）。我们默认的那张幻灯片1的交互式页面载入时他的交互动作是暂停6秒，设定值=1）设置动态面板，设置焦点给input部件，这就可以循环播放了。

8.在自动播放的基础上加左右滑动。

向左滑动就设置第二个面板层，向右滑动还设置为本层，因为是第一层，也可以看自己的要求，循环到第5个。

依次复制交互给5个面板层，每个曾都必须有向左滑动向右滑动的交互，记得修改滑动后的跳转面板。

效果预览